Question

我正在尝试解决我在Bootstrap 3中遇到的一个特殊问题。这是我第一次使用它，所以也许我错过了一些东西。

基本上，在我的页面底部，我有一个新闻部分，可以在除“超小”设备之外的所有设备上正确显示。

这是它在小型到大型设备上的外观：

这就是它在一个超小型设备上的样子：

正如你所看到的，顶部div现在大于底部div，没有明显的原因（我认为）。它宽30像素。

即使删除所有蓝色div的内容，它仍然更宽，所以它不是内部的元素。

这是我的HTML：

  <div class="row rowspacer">
    <div class="container">
      <div class="news-help bs-callout bs-callout-blueborder col-md-3 col-sm-4 col-xs-12">
        <h4><i class="fa fa-globe"></i>&nbsp;News</h4>
        <span class="small news-subtitle">from us</span>
        <form class="form-articles">
          <div class="form-group">
            <label for="sel1">Number of articles:</label>
            <select class="form-control" id="sel1">
              <option value="3">3</option>
              <option value="5">5</option>
              <option value="10">10</option>
              <option value="all">Alle</option>
            </select>
          </div>
        </form>
      </div>
      <div class="news-wrapper col-md-9 col-sm-8 col-xs-12">
        <div class="bs-callout bs-callout-danger">
          <h4>New order mechanism!</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, minus, eum quam adipisci saepe, unde asperiores nesciunt blanditiis similique nisi explicabo. Deserunt alias maxime nemo cupiditate, veritatis recusandae quasi nostrum.
          </p>
          <p class="small">01/09/2015</p>
        </div>
        <div class="bs-callout bs-callout-danger">
          <h4>Open every day in August</h4>
          <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim consectetur, voluptatibus maiores totam delectus tempora exercitationem ad numquam, cupiditate, nisi quo expedita veniam repudiandae! Nam ipsum aperiam, recusandae maiores at.
          </p>
          <p class="small">01/08/2015</p>
        </div>
      </div>
    </div>
  </div>

这是我的（相关）CSS：

.rowspacer {
  margin-top: 40px;
}

.bs-callout {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  /*border-color: #eee;*/
  border-color: #E1E1E1;
  border-image: none;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px 1px 1px 5px;
  margin-bottom: 7px;
  padding: 20px;
  background-color: #fff;
}

.bs-callout-danger {
  border-left-color: #d9534f;
}

.bs-callout-blueborder {
  border-left-color: #325d88;
}

.news-subtitle {
  margin-left: 19px;
}

.form-articles {
  margin-top: 22px;
}

谢谢！

Answer 1

您的bs-callout标记不一致。你的第一个标注是引导列，而另外两个是其列的后代。

将第一个标注放在列中，作为新元素：

<div class="row rowspacer">
<div class="container">
  <div class="news-help col-md-3 col-sm-4 col-xs-12">
    <div class="bs-callout bs-callout-blueborder"> <!-- Here -->
      <h4><i class="fa fa-globe"></i>&nbsp;News</h4>
      <span class="small news-subtitle">from us</span>
      <form class="form-articles">
        <div class="form-group">
          <label for="sel1">Number of articles:</label>
          <select class="form-control" id="sel1">
            <option value="3">3</option>
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="all">Alle</option>
          </select>
        </div>
      </form>
    </div> <!-- /Here -->
  </div>
  <div class="news-wrapper col-md-9 col-sm-8 col-xs-12">
    <div class="bs-callout bs-callout-danger">
      <h4>New order mechanism!</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, minus, eum quam adipisci saepe, unde asperiores nesciunt blanditiis similique nisi explicabo. Deserunt alias maxime nemo cupiditate, veritatis recusandae quasi nostrum.
      </p>
      <p class="small">01/09/2015</p>
    </div>
    <div class="bs-callout bs-callout-danger">
      <h4>Open every day in August</h4>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim consectetur, voluptatibus maiores totam delectus tempora exercitationem ad numquam, cupiditate, nisi quo expedita veniam repudiandae! Nam ipsum aperiam, recusandae maiores at.
      </p>
      <p class="small">01/08/2015</p>
    </div>
  </div>
</div>
</div>

JSFiddle

Answer 2

jsfiddle

<div class="row rowspacer">
    <div class="container">
      <div class="news-help bs-callout bs-callout-blueborder col-md-3 col-sm-4 col-xs-12">
        <h4><i class="fa fa-globe"></i>&nbsp;News</h4>
        <span class="small news-subtitle">from us</span>
        <form class="form-articles">
          <div class="form-group">
            <label for="sel1">Number of articles:</label>
            <select class="form-control" id="sel1">
              <option value="3">3</option>
              <option value="5">5</option>
              <option value="10">10</option>
              <option value="all">Alle</option>
            </select>
          </div>
        </form>
      </div>
      <div class="news-wrapper col-md-9 col-sm-8 col-xs-12">
        <div class="bs-callout bs-callout-danger">
          <h4>New order mechanism!</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, minus, eum quam adipisci saepe, unde asperiores nesciunt blanditiis similique nisi explicabo. Deserunt alias maxime nemo cupiditate, veritatis recusandae quasi nostrum.
          </p>
          <p class="small">01/09/2015</p>
        </div>
        <div class="bs-callout bs-callout-danger">
          <h4>Open every day in August</h4>
          <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim consectetur, voluptatibus maiores totam delectus tempora exercitationem ad numquam, cupiditate, nisi quo expedita veniam repudiandae! Nam ipsum aperiam, recusandae maiores at.
          </p>
          <p class="small">01/08/2015</p>
        </div>
      </div>
    </div>
  </div>

的CSS

.rowspacer {
  margin-top: 40px;
}

.bs-callout {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  /*border-color: #eee;*/
  border-color: #E1E1E1;
  border-image: none;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px 1px 1px 5px;
  margin-bottom: 7px;
  padding: 20px;
  background-color: #fff;
}

.bs-callout-danger {
  border-left-color: #d9534f;
}

.bs-callout-blueborder {
  border-left-color: #325d88;
}

.news-subtitle {
  margin-left: 19px;
}

.form-articles {
  margin-top: 22px;
}

Bootstrap：完全相同的div上的额外宽度

2 个答案: