Bootstrap 3浮動正確防止堆棧

我開始使用Bootstrap 3，它似乎就像你用它來定義和所有的結構，但可能會有很多的容器，讓你自己的自定義類？Bootstrap 3浮動正確防止堆棧

我有我已經改變了的定義是流動的，因此現在是一個容器：

.fluid-container { 
    padding-left: 15px; 
    padding-right: 15px; 
    margin-left: auto; 
    margin-right: auto; 
    min-width:500px; 
}

，但是當涉及到行和漿紗他們，我遇到了一些問題，在這裏，我我不確定它是用我自己定製的課程解決還是以我不知道的方式利用引導程序。

在這種情況下.fluid容器將成爲一個標題，在它的內部，我有一個容器，我想在左邊，然後是另一個容器在右邊。通常情況下，我只需製作兩個容器，左移一個，右另一個，然後在父容器上放一個最小寬度。

在引導什麼，我所做的就是這個（小提琴這裏http://jsfiddle.net/hg84F/2/）：

<div class="lp"> 
    <div class="lp-shell-head lp-fluid-container" style="border:1px solid red;"> 
     <div class="row"> 
      <div class="col-sm-2" style="border:1px solid blue;">left</div> 
      <div class="col-sm-2 col-sm-offset-8" style="border:1px solid green;">right</div> 
     </div> 
    </div> 
</div>

與此問題是，當我使頁面寬度的兩個容器最終成爲全寬和堆棧之上彼此。我想要發生的事情是讓他們留在他們各自的方面，不管怎麼樣，我不知道如何讓他們做到這一點。有關如何以這種方式使用bootstrap的任何想法？

來源

2013-12-17 loriensleafs

我想要發生的事情是讓他們留在他們各自的方面，不管是什麼，我不知道如何讓他們做到這一點。有關如何以這種方式使用bootstrap的任何想法？

http://getbootstrap.com/css/#grid - 有關自舉網格的更多信息。

<div class="row"> 
    <div class="col-xs-2" style="border:1px solid blue;">left</div> 
    <div class="col-xs-2 col-xs-offset-8" style="border:1px solid green;">right</div> 
</div>

所有你根據你的問題缺少的，是超小（總響應）列類，它是COL-XS-*

來源

2013-12-17 17:14:24 JonathanR

所以當我這樣做的時候會發生什麼，就像你縮小屏幕一樣，最後右邊的物品在小提琴的屏幕上移動，爲什麼？ http://jsfiddle.net/hg84F/6/ – loriensleafs

當您刪除「最小寬度：500px;」從.lp流體容器中，整個div變成流體。如果將其設置爲「max-width：500px;」你可能會得到你想要的結果，但根據你的解釋，我不確定這是否是你想要的輸出。 – JonathanR

所以這是一個稍微不同的方式對您的問題。根據你對JonathanR的回答提出的問題和意見，我想你需要一點小小的調整。

喬納森的解決方案是有效的，但我真的不確定你想在「左」和「右」實際接觸之前「擠壓」頁面的距離。 Bootstrap使用「col-」和「offset-」元素的基於百分比的寬度和邊距。如果你試圖擠壓它，你會開始看到水平滾動。這個例子以不同的方式解決了這個問題。

這是我的工作例如：http://bootply.com/101136

<!-- 'Container-fluid' class no longer exists in 3.0, but I use it as a semantic wrapper class --> 
<div class="container-fluid"> 
    <!-- Make sure you use include the bootstap 'container' class --> 
    <div class="lp-shell-head lp-fluid-container container" style="border:1px solid red;"> 
     <div class="row"> 
      <!-- Use one XS col instead of 2 col-xs-2 and the offset --> 
      <div class="col-xs-12"> 
      <!-- Use two div elements and float them left/right --> 
      <div class="pull-left" style="border:1px solid blue;">left</div> 
      <div class="pull-right" style="border:1px solid green;">right</div> 
      </div> 
     </div> 
    </div> 
</div>

在CSS輕微變化。將您的「最小寬度」切換爲「最大寬度」，以防止您的行擴大到超過500像素的閾值。

.container-fluid { 
border:1px solid purple; 
} 

.lp-fluid-container { 
    padding-left: 15px; 
    padding-right: 15px; 
    margin-left: auto; 
    margin-right: auto; 
    /* Switched to 'max-width' */ 
    max-width:500px; 
}

來源

2013-12-17 21:09:37 Bmoeller

Bootstrap 3浮動正確防止堆棧

回答

相關問題