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

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;
}

您可以看到，我已经尝试过调整边距、填充，甚至使列X，而没有任何工作。难道这是不可能的，难道它们不像我试图制造的那样充满活力吗？谢谢。

Answer 1

意识到我可以将一个col-xs-12元素封装在一个col-xs-6元素中，它会给出我想要的间距。

而不是

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

我刚做了

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

Answer 2

试试这段代码

<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 3

​

.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;
}

<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>

​

这和你想要的一样吗？

这是JSFiddle