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

我需要做些什么才能使这些列并排浮动？

Answer 1

你padding的{{1}}已经为你的.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

为什么这些漂浮的柱子不是彼此相邻？

CSS

演示

1 个答案: