增加兩個自舉列之間的保證金讓他們對彼此

疊放我有兩個引導欄，side by side，但是當我添加保證金給他們，然後列彼此的stack on top分開。我爲我的兩列使用了Mixed：Mobile，平板電腦和桌面網格模板，但我不確定這是否是原因。增加兩個自舉列之間的保證金讓他們對彼此

#antGame { // container 
 
    height: 60%; 
 
    position: relative; 
 
    background-color: #fff; 
 
    border: 1px solid grey; 
 
    padding: 0 !important; 
 
} 
 

 
#stimuliContainer { 
 
    height: 40%; 
 
} 
 

 
#stimuli { 
 
    width: 100%; 
 
    max-height: 100%; 
 
} 
 

 
#errorMsg { 
 
    height: 20%; 
 
    width: 100%; 
 
} 
 

 
#antInstruct { 
 
    height: 60%; 
 
    background-color: #fff; 
 
    border: 1px solid grey; 
 
}

<div class="container"> 
 
    <div class="row"> \t 
 
     <div class="col-xs-12 col-sm-6 col-lg-8" id="antGame"> 
 
      <div id="stimuliContainer"> 
 
       <img id="stimuli" src="images/ant/cues/blank.png"> 
 
      </div> 
 
      <div class="col-xs-12 col-sm-6 col-lg-8" id="errorMsg"> 
 
       <span>Error Message</span> 
 
      </div> 
 
     </div> 
 
\t \t \t \t \t 
 
     <div class="col-xs-6 col-lg-4" id="antInstruct"> 
 
      <h4>Instructions</h4> 
 
      <span>Hi</span> 
 
     </div> 
 
    </div> 
 
</div>

來源

2016-11-21 TraderJosh

你可以張貼'CSS'規則，這實際上增加了這個'margin'？ – markoffden

您是否在div中嘗試過col-md-offset-1？ –

我不建議重寫引導列的填充，因爲它可以打破的響應，但你知道，有時候你被迫這樣做。

在這種情況下，您可以做的最乾淨的方法是添加一個自定義類.padding-2，即覆蓋Boostrap填充但不破壞響應。

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-6 padding-2 "> 
     <div style="border: 1px black solid; background-color: red;"> 
      1 col 
     </div> 
     </div> 
     <div class="col-xs-6 padding-2 "> 
     <div style="border: 1px black solid; background-color: blue;"> 
      2 col 
     </div> 
     </div> 
    </div> 
</div>

CSS

.padding-2 { 
    padding-left: 2px; 
    padding-right: 2px; 
}

演示：http://www.bootply.com/eO033QYCn3

來源

2016-11-21 09:45:22 Troyer

我想要兩列分開大約2px。我已設法通過改變使用ID選擇#antGame和#antInstruct寬度要做到這一點，但是這打破了響應。 – TraderJosh

這工作得非常好。 – TraderJosh

嘗試使用填充代替保證金，然後，如果你想擁有，例如邊界，你可以在這個填充中添加另一個元素。

下面是一個例子：

<div class="container"> 
     <div class="col-xs-6" style="padding: 5px"> 
     <div style="border: 1px black solid;"> 
      1 col 
     </div> 
     </div> 
     <div class="col-xs-6" style="padding: 5px"> 
     <div style="border: 1px black solid;"> 
      2 col 
     </div> 
     </div> 
    </div>

和演示：

https://plnkr.co/edit/5fCMTJMJWPALk3W45t1i?p=preview

來源

2016-11-21 09:47:51

增加兩個自舉列之間的保證金讓他們對彼此

回答

相關問題