爲什麼我的twitter助推器頁面離開頁面的邊緣？

我很新的Twitter的引導時遇到問題，以下結構爲什麼我的twitter助推器頁面離開頁面的邊緣？

<Container> - Using Fluid container 
    <Row 1>  
    <Column 1> - Covers 6 columns 
     <Row 1> - Electricity 
     <Row 2> - Electricity Graph 
     <Row 3> - Electricity Table 
    </Column 1> 
    <Column 2> - Covers 6 columns 
     <Row 1> - Gas 
     <Row 2> - Gas Graph 
     <Row 3> - Gas Table 
    </Column 2> 
    </Row 1> 
    <Row 2> - covers entire width 
    Table 
    </Row 2> 
<Container>

See here for page

正如你所看到的內容已經超出頁面左側

邊緣有誰知道什麼可能導致這種情況？

如何獲得可靠的小邊距左右？

鉻甚至有問題呈現所述第一報頭

不知何故含量低於已使水平滾動條的實際瀏覽器寬度寬，雖然還沒有一個大的重疊？

該標記太大而無法在此發佈，因此here是它的鏈接。

來源

2014-12-05 Paul

我們知道bootstrap是如何工作的！這並不需要向我們顯示，但相關的標記和CSS將有助於幫助你。並深入鏈接是沒有人關心...... – 2014-12-05 23:00:05

我認爲這是你的SVG。看看你的DOM檢查器。你會看到那是突出的元素。 – jeremywoertink 2014-12-05 23:04:31

我已添加鏈接以顯示標記。我並沒有試圖向任何人展示如何啓動strapper工作，只是我如何使用它 – Paul 2014-12-06 00:00:43

似乎有兩件事情正在進行。首先像保羅在上面的評論中提到的那樣，SVG圖表對容器來說太大了，並且正在推出箱子。這可以通過添加一個overflow:hidden到<div class="col-md-6">

其次您使用引導.row類的方式是不正確的，它搞亂了佈局。例如您的結構是使用這樣的：

<!-- THIS IS NOT CORRECT NESTING --> 
<div class="col-md-6"> 
    <div class="heading row">...</div> 
    <div class="row">...</div> 
    <div class="row sectionHeading">...</div> 
    <div class="row">...</div> 
</div>

的.row應僅用於包含列.col-xs-*, .col-sm-*, .col-md-*, .col-lg-*爲.row直接孩子。如果它們嵌套不正確，則會出現邊距和填充問題，因爲.row具有負左右邊距以調整列中的排水溝。在上面的示例中，.row類應該被刪除，因爲div自然會堆疊在彼此之上，並且它們會創建不必要的空間。

說了這麼一件事，我發現奇怪的是，爲了完全消除水平間距，我不得不刪除所有row標記的實例，當他們應該像傾斜一樣工作...希望有所幫助。

來源

2014-12-06 01:28:57 crazymatt

upvoted它之後，我添加了一點關於嵌套 – Christina 2014-12-06 04:53:13

謝謝@Christina我正在離開工作，沒有時間重新讀通過我寫的編輯。 – crazymatt 2014-12-06 05:23:33

謝謝！我做了這些調整，現在它運行得更好！行類導致問題的方式很奇怪，但沒關係，現在沒有它的工作:) – Paul 2014-12-07 19:03:37

爲什麼我的twitter助推器頁面離開頁面的邊緣？

回答

相關問題