Bootstrap 4 - 無列封裝

-1

我需要在調整瀏覽器大小時阻止B4列封裝。這裏是我的代碼：Bootstrap 4 - 無列封裝

<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

但是，當我把它縮小它仍然包裹。

感謝您的幫助。

來源

2017-04-20 Mark

通過「包裝」你的意思是，他們開始「堆」在較低的尺寸......一個在另一個頂部的方式嗎？ – mayersdesign

你確切的要求是什麼？ –

@mayersdesign - 是的。我的要求是在右側的列離開視圖後立即顯示一個水平條。換句話說，關閉響應能力。 – Mark

col-xs-*類不支持自舉4。 col-xs-*被用於自舉3所以，它在自舉4中的替換是col-*。

因此，您的類col-xs-4不會與引導程序4一起使用。因此請改爲使用col-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>

來源

2017-04-20 11:07:50

我明白了。是的，它不再包裝列。但是當我水平調整大小時，這些列的寬度會變小。這不是我想要的。我想要一個水平條代替。任何想法？ – Mark

你是在談論左右兩邊空間的空間嗎？ –

列中的空間，換句話說它們的寬度。縮小瀏覽器時是否可以保持不變？ – Mark

Bootstrap 4 - 無列封裝

回答

相關問題