为什么这些浮柱不并排放置？

Question

我正在尝试建立一个基于twitter引导程序的简单网格系统，将其关闭，在768px媒体查询断点以下，布局正确，但各列在媒体查询断点上方未并排放置。

的HTML

<div class="container-fluid">
  <div class="row">
    <section class="col-sm-6" style="background-color: gainsboro;">
      <img  src="http://lorempixel.com/150/150" alt="" />
    </section>

    <section class="col-sm-6" style="background-color: cadetblue;">
      <h1>King Arthur</h1>
      <p>Why? But you are  dressed as one&hellip; Why do you think that she is a witch? Well, how'd you become king, then? We shall say 'Ni' again to you, if you do not appease us. She looks like one.</p>
      <hr>
      <br/>
      <form action="" method="post">
        <fieldset class="form-group">
          <label for="category">
            Category
          </label>

          <select name="category" id="rate-category" class="form-control">
            <option value="some value">option 1</option>
          </select>
        </fieldset>
        <br/>
        <input class="btn btn-primary btn-block" type="submit" value="go" />

      </form>
    </section>
  </div>
</div>

的CSS

body {
    font-family: sans-serif, arial;
    font-size: 16px;
    margin: 0;
    padding: 0;
}


.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Apply Nicholas Gallagher's "microclearfix"
 */
.container-fluid:after {
    content: "";
    display: table;
    clear: both;
}

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

.row:after {
    content: "";
    display: table;
    clear: both;
}

 .col-sm-6 {
  /*position: relative;*/
  min-height: 1px;
  padding-right: 15px;
  padding-left:  15px;
}

@media (min-width: 768px) {
  .col-sm-6 {
    float: left;
  }

  .col-sm-6 {
    width: 50%;
  }
}

演示版

我已经设置了一个Codepen

我需要怎么做才能使这些列彼此并排漂浮？

Answer 1

由于padding您将.px .col-sm-6额外增加了30px。 您应该更新班级并添加box-sizing: border-box; 这将包括对元素宽度的填充：

.col-sm-6 {
  /*position: relative;*/
  min-height: 1px;
  padding-right: 15px;
  padding-left:  15px;
  box-sizing: border-box; // This will include padding to element width
}

这是codepen： http ://codepen.io/anon/pen/ZbpbeY?editors=110