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

Question

I've got two col-md-6 items inside a row container, but I'm not able to shrink the left and right borders while keeping the text centered. Here is my 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>

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

You can see that I've tried adjusting the margins, the padding, even making the columns xs, and nothing works. Is it just not possible, are they not dynamic like I'm trying to make them? Thanks.

Answer 1

try this code

<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

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

is this the same that you want ?

here is JSFiddle

Answer 3

Realized I could wrap a col-xs-12 element in a col-xs-6 element and it would give me the spacing I wanted.

Instead of

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

I just did

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