ブートストラップ4 - 列の折り返しなし

Question

ブラウザのサイズ変更時にB4列が折り返されないようにする必要があります。ここに私のコードです：

<div class="card card-outline-primary"> 
<div class="card-block"> 
    <form class="row"> 
     <div class="col-xs-4" style="border:solid;border-color:red;border-width:5px;"> 
      <label for="visualTheme" class="control-label">1234</label> 
      <div> 
       <input class="form-control" style="height:30px;"/> 
      </div> 
     </div> 
     <div class="col-xs-4" style="border:solid;border-color:blue;border-width:5px;"> 
      <label class="control-label">5678</label> 
      <div> 
       <input class="form-control" style="height:30px;" /> 
      </div> 
     </div> 
     <div class="col-xs-4" style="border:solid;border-color:green;border-width:5px;"> 
      <label class="control-label">abcd</label> 
      <div> 
       <input class="form-control" style="height:30px;" /> 
      </div> 
     </div> 
    </form> 
</div> 

Fiddle

しかし、私はそれを小さくするとき、それはまだラップします。

ありがとうございました。

Answer 1

col-xs-*ブートストラップではクラスがサポートされていません4。 col-xs-*はので、ブートストラップ4におけるその交換がcol-*あるブートストラップ3で使用しました。

だからあなたのクラスcol-xs-4だから代わりにcol-4を使用し、ブートストラップ4で仕事に行くされていません。ここで

あなたのコードとコードです。 「ラッピング」と

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="card card-outline-primary"> 
 
    <div class="card-block"> 
 
    <form class="row"> 
 
     <div class="col-4" style="border:solid;border-color:red;border-width:5px;"> 
 
     <label for="visualTheme" class="control-label">1234</label> 
 
     <div> 
 
      <input class="form-control" style="height:30px;" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-4" style="border:solid;border-color:blue;border-width:5px;"> 
 
     <label class="control-label">5678</label> 
 
     <div> 
 
      <input class="form-control" style="height:30px;" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-4" style="border:solid;border-color:green;border-width:5px;"> 
 
     <label class="control-label">abcd</label> 
 
     <div> 
 
      <input class="form-control" style="height:30px;" /> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </div>