Question

我有两个引导列side by side，但是当我添加一个边距来分隔它们时，彼此的列stack on top。我正在使用混合：移动，平板电脑和桌面网格模板作为我的两列，我不确定这是否是原因。

#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">	
        <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>
					
        <div class="col-xs-6 col-lg-4" id="antInstruct">
            <h4>Instructions</h4>
            <span>Hi</span>
        </div>
    </div>
</div>

Answer 1

我不建议覆盖Bootstrap列的填充，因为它可以破坏响应，但是你知道，有时你被迫这样做。

在这种情况下，你可以做的最干净的方法是添加一个自定义类 .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

Answer 2

尝试使用填充而不是边距，然后，如果你想拥有例如边框，你可以使用填充添加另一个元素。

以下是一个例子：

<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

在两个引导列之间添加边距使它们堆叠在彼此之上

2 个答案: