Question

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

例如：

我有8个这样的元素。

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

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

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

有没有办法只使用Twitter Bootstraps的CSS和Classes？

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

Answer 1

您可以使用适当的Bootstrap {{h1}}类来实现此目的：

col=*

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

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

http://bootply.com/88121

Answer 2

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

一旦达到某个宽度，每个div都会获得它自己的行。

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

亲自测试一下，看看它是否符合您的需求：）

使用Twitter Bootstrap打破导航

2 个答案: