html - 缩小 col-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;
}

您可以看到我已经尝试调整边距、填充，甚至将列设置为 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;
}