html - 为什么这些带凹槽的柱子不并排放置？

Question

我正在尝试基于 twitter bootstrap 构建一个简单的网格系统，我已将其关闭，在 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

我需要做什么才能让这些列并排 float ？

Answer 1

由于 padding，您将 30px 额外添加到 .col-sm-6。您应该更新您的类并添加 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
}

这是代码笔:http://codepen.io/anon/pen/ZbpbeY?editors=110