在引導列之間添加邊距，同時爲12列寬度列移除它

我正在使用自定義版本的Bootstrap v3，在列（間隙）之間添加百分比頁邊空白。在引導列之間添加邊距，同時爲12列寬度列移除它

爲了在除了第一列以外的任何地方都有保證金，我使用了一條規則，該規則查找了一行的第一個孩子並重置了其保證金。這用於Boostrap v2的工作，但現在對元素應用多個寬度類別時，它也不起作用。

原因是，當col - * - 12被觸發時，不是行的第一個子元素的元素不與左邊div的其餘部分對齊。（因爲它繼承了餘裕值）

爲了說明這個問題，我做了一個重頭戲。 http://embed.plnkr.co/t31Sc2cPvaIsSYVv7OIT/

您必須知道，這是在具有20種不同佈局的CMS環境中實現的，因此解決方案當然應該是通用的。

來源

2014-09-24 George Katsanos

你想要做什麼？你想知道如何改變水槽寬度，但是頁面在第3版中仍然有響應嗎？或者，您是否承諾採用您的方法，並且希望查看是否有針對此特定問題的解決方案？ – jme11 2014-09-24 18:12:50

我想找到一個智能的方法來重置餘量爲0的元素，它佔據了整個寬度容器的100％..雖然當然是響應式的（這就是要做到這一點） – 2014-09-24 19:51:58

有可能你要去很多做一些事情麻煩Bootstrap已經做到了......將你的cols放在一個.row中，在大多數情況下，不需要強制使用負邊距，因爲.row用-15px邊距補償了填充。通過這種方式，左側和右側欄內的內容正好在邊緣，但內側欄中填充完整。你顯然有很多事情要做，但有可能實現這一點會節省你的時間和加重... – 2014-09-24 21:17:01

問題的解決方案比我想象的要簡單。

我移動媒體查詢內部的利潤率左聲明：

@media (min-width:579px) { 
    .col-sm-1, 
    .col-sm-2, 
    .col-sm-3, 
    .col-sm-4, 
    .col-sm-5, 
    .col-sm-6, 
    .col-sm-7, 
    .col-sm-8, 
    .col-sm-9, 
    .col-sm-10, 
    .col-sm-11 { 
    float: left; 
    margin-left: 3.1518624641834%; 
    *margin-left: 2.0744680851064%; 
    } 
.... 
}

我重置利潤率左-12（100％範圍內）的列只，再內每個媒體查詢。

.col-sm-12 { 
    width: 100%; 
    *width: 99.946808510638%; 
    margin-left: 0; 
    }

重要的回憶是你不應該有任何保證金左聲明之外的媒體查詢。

來源

2014-09-26 08:25:59

你需要設置，最大寬度自定義媒體查詢，而不是通常的最小寬度，並給它一個margin-left:0px;像這樣：

@media (max-width: 1169px){ 
    .row .col-md-12{ 
    margin-left: 0px; 
    } 
}

HTML：

<div class="row"> 
    <div class="col-md-12">...</div> 
</div>

來源

2014-09-24 18:29:04

應用此規則將設置爲0包含類col-md-12的所有div邊距。所以我不再有任何排水溝了... – 2014-09-24 19:53:54

所以在那裏添加另一個類... ie「.row .col-md-12 .custom {...「並且將該類添加到HTML中的單個位置，您需要使用它 – 2014-09-24 20:01:27

您沒有得到它..這不是一次性異常，這是一種通用情況，可以在任何佈局中的任何嵌套元素中發生，任何類型的...... – 2014-09-24 21:03:07

在引導列之間添加邊距，同時爲12列寬度列移除它

回答

相關問題