css - 在 Bootstrap 3 中创建一个等同于 5 个 div 的 div

Question

我正在尝试在 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>

所以我得到了这样的输出-

但是当我改变页面的宽度时，问题就出现了。它变得垂直而不是保持水平，就像它-

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

谁能帮帮我？

在此先感谢您的帮助。

Answer 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 -->