0

我在问自己，当窗口宽度低于导航宽度时，是否可以将单行导航分解为n行。

例如：

我有8个这样的元素。

[1]-[2]-[3]-[4]-[5]-[6]-[7]-[8]

现在，当窗口宽度变得太小时，我希望它们被分成两行，当它再次变得太小时，我想要三或四行，依此类推，如下所示。

[1]-[2]-[3]-[4]
[5]-[6]-[7]-[8]

有没有办法通过使用 Twitter Bootstraps 的 CSS 和类来做到这一点？

小提琴：http: //jsfiddle.net/H7YNW/

4

2 回答 2

1

您可以使用适当的 Bootstrapcol=*类来实现这一点：

<div class="container">
  <div class="row">

    <div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">1</div>
    <div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">2</div>
    <div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">3</div>
    <div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">4</div>
    <div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">5</div>
    <div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">6</div>
    <div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">7</div>
    <div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">8</div>

  </div>
</div>

对于您的 UL 列表，它看起来像..

   <div class="row">
          <ul class="list-unstyled">
            <li class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
              <a href="index.html">Home</a>
            </li>
            <li class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
              <a href="services.html">Services</a>
            </li>
            <li class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
              <a href="404.html">Studies</a>
            </li>
            <li class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
              <a href="404.html">References</a>
            </li>
            <li class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
              <a href="404.html">Login</a>
            </li>
            <li class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
              <a href="404.html">Press</a>
            </li>
            <li class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
              <a href="404.html">Contact</a>
            </li>
            <li class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
              <a href="404.html">Impressum</a>
            </li>
          </ul>
  </div>

http://bootply.com/88121

于 2013-10-16T15:20:59.813 回答
1

我知道这不是 Bootstrap 导航的一部分，但也许您可以制作自己的自定义导航。Bootstrap 有这些名为 col-md-X 的类。X 是您要占用的列数。但是，它并没有完全按照您的要求进行分解。

一旦达到一定的宽度，每个 div 都会有自己的行。

http://getbootstrap.com/css/#grid-example-basic

自己测试一下，看看它是否符合您的需求:)

于 2013-10-16T15:21:29.943 回答