twitter-bootstrap - 如何让DIV在小屏幕上全宽

Question

我的设计布局有问题:

HTML:

<div class="col-lg-10 col-lg-offset-1">
    <img class="advertise-two img-responsive col-lg-12 col-xs-12 col-sm-12" src="http://placehold.it/1050x220" alt="" />
    <ul class="menus">
        <li>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
        </li>
    </ul><!-- /.menus -->
</div><!-- /.col-lg-10 col-lg-offset-1 -->

看起来像这样: http://postimg.org/image/ffbjrbg8j/

但是在小屏幕上它看起来像这样: http://postimg.org/image/71gbdxq81/

有什么想法吗？

Answer 1

使用 class="row" 将代码包装在 div 中，并将 col-xs-12 添加到内部 div :

<div class="row">
  <div class="col-lg-10 col-lg-offset-1 col-xs-12">
    ...
  </div>
</div>