如何在小屏幕上制作DIV全宽

I have a problem here with my design layout:

我的设计布局有问题:

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

Looks like this: http://postimg.org/image/ffbjrbg8j/

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

But in a small screen it appears like this: http://postimg.org/image/71gbdxq81/

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

Any ideas?

2 个解决方案

#1

Wrap your code in a div with class="row" and add col-xs-12 to your inner div:

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

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

#2

you can center col-lg-10 using margin:0 auto (eliminate offset value)

你可以使用margin:0 auto(消除偏移值)来居中col-lg-10

and then add col-xs-12, something like :

然后添加col-xs-12,类似于:

<div class="col-lg-10 col-xs-12" style='margin: 0 auto'>

I can't be sure it will work because it also depends on the other markup you have (rows - contatiners - etc.)

我无法确定它是否会起作用,因为它还取决于你拥有的其他标记(行 - contatiners等)

#1