Bootstrap響應式樣式表打破跨度寬度？

enter image description here 忙於實施Twitter Bootstrap幷包含響應式CSS文件，但這會導致我的跨度出現問題。整個寬度應該達到span12，並且6 * span2也應該這樣做。Bootstrap響應式樣式表打破跨度寬度？

現在，這裏是有趣的部分。如果bootstrap-responsive.css沒有被加載，它會工作，但是當我加載響應文件時，最後一個跨度漂浮在左下角。

起初我認爲這可能是我的邊界，但我刪除它們，它仍然漂浮在底部。

  <div class="row" style="border: 1px solid green"> 
       <div class="container" style="border: 1px solid blue"> 
        <div class="span2" style="border: 1px solid red">Foo!</div> 
        <div class="span2" style="border: 1px solid red">Bar!</div> 
        <div class="span2" style="border: 1px solid red">Baz!</div> 
        <div class="span2" style="border: 1px solid red">Foo!</div> 
        <div class="span2" style="border: 1px solid red">Bar!</div> 
        <div class="span2" style="border: 1px solid red">Baz!</div> 
       </div> 
      </div>

它應該可以加載兩個CSS文件，並得到一個體面的佈局，雖然，對吧？沒有？

我無法找到任何其他指示相似結果的問題。我的Bootstrap CSS文件是未修改的，我還沒有自己的樣式表構建，因此我不認爲這是我做錯了。

任何想法？

謝謝！

Kobus

編輯：上傳截圖瞭解更多信息。

來源

2012-12-02 Kobus Myburgh

你可以試試下面這段代碼，它不應該有任何問題，使用引導-responsive.css

<div class="row" style="border: 1px solid green"> 
    <div class="container" style="border: 1px solid blue; width:100%"> 
    <div class="span2" style="border: 1px solid red">Foo!</div> 
    <div class="span2" style="border: 1px solid red">Bar!</div> 
    <div class="span2" style="border: 1px solid red">Baz!</div> 
    <div class="span2" style="border: 1px solid red">Foo!</div> 
    <div class="span2" style="border: 1px solid red">Bar!</div> 
    <div class="span2" style="border: 1px solid red">Baz!</div> 
</div> 
</div>

更新：

<div class="row-fluid" style="border: 1px solid green"> 
<div class="container" style="border: 1px solid blue"> 
<div class="span2" style="border: 1px solid red">Foo!</div> 
<div class="span2" style="border: 1px solid red">Bar!</div> 
<div class="span2" style="border: 1px solid red">Baz!</div> 
<div class="span2" style="border: 1px solid red">Foo!</div> 
<div class="span2" style="border: 1px solid red">Bar!</div> 
<div class="span2" style="border: 1px solid red">Baz!</div> 
</div> 
</div>

來源

2012-12-02 13:49:42

謝謝@RishiKalia，但這不起作用。使用下面給出的「容器」寬度爲100％的代碼，將網站打破固定寬度。我沒有使用容器流體CSS類 - 我的網站是固定寬度。 –

如果它是固定的寬度，那麼_bootstrap-responsive.css_正在做正確的工作..它正在將超出部分移動到下一行..imho，你必須重新考慮你的網站設計.. –

嗨@RishiKalia，這不會使感覺到我。沒有responsive.css，這不會發生（內容適合，窗口不會調整大小），與它，它（內容不適合，額外的邊距被添加，窗口沒有調整大小）。當我調整屏幕大小時，responsive.css應該只調整元素的大小。我的屏幕寬於940像素，因此在我看來沒有東西應該推回到左邊，但是它們應該調整大小以適應，直到它變得太小而不能調整大小，然後所有6個span2元素都會位於彼此之下。 –

Bootstrap響應式樣式表打破跨度寬度？

回答

相關問題