Question

我在行容器中有两个col-md-6项目，但是我不能缩小左右边框，同时保持文本居中。这是我的HTML：

<div class="row">
 <div class="col-xs-6">
      <div class="card">
          <h4>How can mirrors be real if our eyes aren't real?</h4>
          <p>How can mirrors be real if our eyes aren't real?</p>
       </div>
  </div>
  <div class="col-xs-6">
     <div class="card">
       <h4>How can mirrors be real if our eyes aren't real?</h4>
       <p>How can mirrors be real if our eyes aren't real?</p>
      </div>
  </div>
</div>

和css：

.col-xs-6 {
    border-radius: 6px;
    border: 2px solid blue;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 20px;
    background: red;
    position: relative;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

你可以看到我已经尝试调整边距，填充，甚至使列xs，并且没有任何作用。它是不可能的，它们是不是像我试图制作它们那样充满活力？感谢。

Answer 1

试试这段代码

<div class="row">
 <div class="col-xs-6">
      <div class="card">
          <h4>How can mirrors be real if our eyes aren't real?</h4>
          <p>How can mirrors be real if our eyes aren't real?</p>
       </div>
  </div>
  <div class="col-xs-6">
     <div class="card">
       <h4>How can mirrors be real if our eyes aren't real?</h4>
       <p>How can mirrors be real if our eyes aren't real?</p>
      </div>
  </div>
</div>
and the css:

.col-xs-6 {
    border-radius: 6px;
    border-left: 2px solid blue;
   border-right: 2px solid blue;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 20px;
    background: red;
    position: relative;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

Answer 2

＆＃13;

.col-xs-6 {
    border-radius: 6px;
    border: 2px solid blue;
    border-top:none;
    border-bottom:none;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 20px;
    background: red;
    position: relative;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
    width:90%;
    margin:0 auto;
}

＆＃13;

<div class="row">
 <div class="col-xs-6">
      <div class="card">
          <h4>How can mirrors be real if our eyes aren't real?</h4>
          <p>How can mirrors be real if our eyes aren't real?</p>
       </div>
  </div>
  <div class="col-xs-6">
     <div class="card">
       <h4>How can mirrors be real if our eyes aren't real?</h4>
       <p>How can mirrors be real if our eyes aren't real?</p>
      </div>
  </div>
</div>

＆＃13;

这和你想要的一样吗？

这里是JSFiddle

Answer 3

已实现我可以在col-xs-12元素中包含col-xs-6元素，它会给我我想要的间距。

而不是

<div class="col-xs-6">
        ....
</div>

我刚刚做了

<div class="col-xs-6">
    <div class="col-xs-12>
            ...
    </div>
</div>

缩小col-md-6的左右边框

3 个答案: