在 Bootstrap 3 中创建一个等于 5 个 div 的 div答案

【问题标题】：Make a div of equal 5 divs in Bootstrap 3在 Bootstrap 3 中创建一个等于 5 个 div 的 div
【发布时间】：2015-03-28 06:44:45
【问题描述】：

我正在尝试在 bootstrep 中创建一行有 5 个 div，列宽为 4。

所以代码是-

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-4 col-lg-offset-4">
      <!-- Main Content -->
      <!-- Weather -->
      <div class="element">
        <div class="header_text">
          Weather
        </div>
        <div class="element_body description_text">
          <div class="row">
            <div class="col-md-2">sss</div>
            <div class="col-md-2">sss</div>
            <div class="col-md-2">sss</div>
            <div class="col-md-2">sss</div>
            <div class="col-md-2">sss</div>
          </div>
        </div>
      </div>
      <!-- End Weather -->
      <!-- End Main Content -->
    </div>
  </div>
</div>

所以我得到一个输出，比如 -

但是当我改变页面的宽度时问题就解决了。它变成了垂直插入，而不是保持水平，就像它-

但我不希望它随时改变方向。所以，我希望每次页面宽度改变时它都是水平的。

谁能帮帮我？

提前感谢您的帮助。

【问题讨论】：

您只使用lg 和md 列大小调整类，例如col-md-2。对于最小的 xs 布局，您至少需要列类。尝试将col-md-2 更改为col-xs-2。

标签： css twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

JSFIddle。

问题：

您没有给出sm 和xs 的大小，因为它采用div 的默认行为，即display: block;。

解决方案：

所以将md 更改为xs。

<!-- Content -->
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-lg-offset-4">
                <!-- Main Content -->
                    <!-- Weather -->
                    <div class="element">
                        <div class="header_text">
                            Weather
                        </div>
                        <div class="element_body description_text">
                            <div class="row">
                                <div class="col-xs-2">sss</div>
                                <div class="col-xs-2">sss</div>
                                <div class="col-xs-2">sss</div>
                                <div class="col-xs-2">sss</div>
                                <div class="col-xs-2">sss</div>
                            </div>
                        </div>
                    </div>
                    <!-- End Weather -->
                <!-- End Main Content -->
            </div>
        </div>
    </div>
<!-- End Content -->

【讨论】：