Question

我有一个在移动设备上采用全宽度的块，但在其他屏幕上有3/12列。

所以我有.container班，然后是row班，最后我有<div class="col-xs-offset-3 col-xs-12 col-sm-3 col-md-3 col-lg-3">。

我有什么 当我添加.col-xs-12时，这会影响大，中，小屏幕上的结果！

我想要什么 在大，中，小屏幕上拍摄col-lg-3。移动设备上的全宽（col-xs-12）

你有什么想法吗？

HTML：

<div class="container">
<div class="row">
    <div class="col-xs-offset-3 col-xs-6 col-sm-3 col-md-3 col-lg-3">
        <img src="image.jpg" class="img-responsive" alt="Image">
    </div>


    <a href="#"
       class="lien active">
        <div class="col-xs-6 col-sm-2 col-md-2 col-lg-2">
            Bétons
        </div>
    </a>

    <a href="#"
       class="lien active">
        <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            Sables, graviers ...
        </div>
    </a>

    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 conseil-et-devis-gratuits">
        <p>CONSEILS ET DEVIS GRATUITS</p>
        <img src="image.jpg" class="img-responsive" alt="Image">
        <p>Lundi au vendredi : 8h-12h - 13h-18h - Samedi : 8h-12h</p>
    </div>
</div>

Answer 1

如果我理解你想要的东西，你需要重置更大屏幕的偏移量：

<div class="col-xs-offset-3 col-xs-9 col-sm-3 col-sm-offset-0"></div>

请参阅http://getbootstrap.com/css/#grid-offsetting

如果您想要的只是移动设备上的全宽，那么您根本不需要使用偏移。

<div class="col-xs-12 col-sm-3"></div>就足够了。

Bootstrap 3 col-xs-12影响其他屏幕siez

1 个答案: