在更改大小時將引導列保留在同一行中

我有一個div，它有兩列 - 一個保存一個圖形，另一個保存文本。在較大的尺寸，這正常工作：在更改大小時將引導列保留在同一行中

enter image description here

但是，當瀏覽器是在一個較小的寬度（或移動），列分裂，它結束了看起來像這樣：

enter image description here

有沒有什麼辦法強迫列保持在一個單一的行？兩個色譜柱都有足夠的空間，即使在最窄的尺寸下也是如此。

這是我的一個單列HTML：

<div class="row"> 
    <div class="col-md-2"><i class="fa fa-check fa-2x fa-fw"></i></div> 
    <div class="col-md-10"> 
     <p>Zero Day Protection</p> 
    </div> 
</div>

的CSS是標準的引導（該i類是FontAwesome glyphicon）。

來源

2015-06-16 EmmyS

class="col-md-2 col-xs-2"和class="col-md-10 col-xs-10"

您可以結合類的元素，使其行爲根據屏幕大小一定的方式。你可以做類似class="col-md-2 col-xs-6"和class="col-md-10 col-xs-6"等...

來源

2015-06-16 21:58:19

使用col-xs-*網格類。

<div class="row"> 
    <div class="col-xs-2"><i class="fa fa-check fa-2x fa-fw"></i></div> 
    <div class="col-xs-10"> 
     <p>Zero Day Protection</p> 
    </div> 
</div>

在引導網格中，默認情況下，所有列的寬度都是100％。使用col-<size>-<number>類來覆蓋它。 <size>可以是xs,sm,md或lg，並且是指該類別應用的最小屏幕寬度。 <number>是從1到12的數字，指的是您的內容應該包含的列數。

因此，也許你有非常寬的內容，它應該只能在桌面瀏覽器上並排顯示。你可以給你的內容class="col-md-6"，只要瀏覽器窗口的寬度至少爲992像素，它就會並排顯示。

但是，對於您來說，由於您的內容非常小，因此您希望它始終顯示爲並排，因此您應該使用col-xs-<number>類。

你可以讓這個移動，你必須每行一對，但在平板電腦上，你有兩個每行，並在桌面上你有3個，每行：

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";

<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> 
 
     <div class="col-xs-9 col-sm-4 col-md-3"> 
 
      <p>Adaptive Updates</p> 
 
     </div> 
 
     <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> 
 
     <div class="col-xs-9 col-sm-4 col-md-3"> 
 
      <p>Online Support and Knowledge Base</p> 
 
     </div> 
 
     <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> 
 
     <div class="col-xs-9 col-sm-4 col-md-3"> 
 
      <p>Direct Support</p> 
 
     </div> 
 
     <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> 
 
     <div class="col-xs-9 col-sm-4 col-md-3"> 
 
      <p>Enterprise Management Console</p> 
 
     </div> 
 
     <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> 
 
     <div class="col-xs-9 col-sm-4 col-md-3"> 
 
      <p>Zero Day Protection</p> 
 
     </div> 
 
    </div> 
 
</div>

有關更多詳細信息，請參閱bootstrap Grid System documentation。

來源

2015-06-16 21:58:42 gilly3

在更改大小時將引導列保留在同一行中

回答

相關問題