如何解決引導容器溢出問題？

我使用引導CSS樣式我的網站。我的代碼很簡單如何解決引導容器溢出問題？

<div id="outer" class="container" style="border:solid"> 
    Test 
    <div id="inner"class="container" style='border:solid width="1280px" '> 
     some text 
    </div> 
</div>

因爲我使用bootstarp，外層div的寬度爲1170px，但是，正如你所看到的，我硬編碼內div的寬度1280px，寬於它的父DIV。從下圖可以看出，內部div的右邊緣與外部div重疊，但左邊緣保持不變。

我的問題是，我能做些什麼不僅擴展內部div的右側，而且擴展內部div的左側。換句話說，始終保持內部div對齊中心。

請幫我解決這個問題 http://jsfiddle.net/FQUXQ/ 任何輸入，非常感謝。

------------------ UPDATE ---------------------

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works這個文章介紹了網格系統如何工作。

enter image description here

來源

2013-11-14 Xavier

小提琴看起來好嗎？您可以嘗試將* {box-sizing：border-box;}添加到您的CSS – SW4

@ExtPro謝謝。所以{box-sizing：border-box;}是用於外部div還是內部div？ – Xavier

是否有效？ – SW4

你在帖子中說：代碼

style='border:solid width="1280px" '

但我猜你的意思是

style='border:solid;width:1280px"

但我認爲它只是一個錯字。然而，在另一個內部使用.container並不是一個好主意，因爲像@Saravanan說的那樣，bootstrap會根據屏幕大小給出寬度（媒體查詢..）

相反，您應該將代碼更改爲

<div id="outer" class="container" style="border:solid"> 
    Test 
    <div id="inner" class="row" style="border:solid"> 
     some text 
    </div> 
</div>

甚至更好，如果你想在你的頁面中的任何列，請使用

<div id="outer" class="container" style="border:solid"> 
    Test 
    <div class="row" style="border:solid"> 
     <div class="col-lg-12" id="inner" > 
      some text 
     </div> 
    </div> 
</div>

類中的最後一個div可以給也更多的類，如果你想它的行爲方式不同在較小的視口。所以我說的是：使用Bootstrap給你的元素，並嘗試按照它的意圖使用它們。看看這個：http://getbootstrap.com/css/#grid

我建議使用單獨的CSS樣式表，而不是內聯。

來源

2013-11-14 13:15:45 mMoovs

這聽起來很不錯。我會玩我的代碼。非常感謝！ – Xavier

如果它可以幫助你解決問題，不要忘記接受這個答案：P – mMoovs

如何解決引導容器溢出問題？

回答

相關問題