Question

我正在创建一个带有bootstrap的网站，我正在使用这种逻辑在移动和桌面版本上以不同方式显示列。我正在使用像.visible-lg和.visible-xs这样的类。这样做是一种很好的做法，可以使列之间的差异不同，并在移动和桌面版本中以不同方式显示它们。

<div class="row">
     <div class="col-lg-3 col-sm-6">
        <img src="images/strelica.png">
    </div>

     <div class="col-lg-1 visible-lg"></div>
     <div class="col-xs-12 visible-xs">&nbsp;</div>

     <div class="col-lg-3 col-sm-6">
        <img src="images/strelica.png">
    </div>       

    <div class="col-lg-1 visible-lg"></div>
     <div class="col-xs-12 visible-xs">&nbsp;</div>

     <div class="col-lg-3 col-sm-6 ">
        <img src="images/strelica.png">
    </div>       

    <div class="col-lg-1 visible-lg"></div>
    <div class="col-xs-12 visible-xs">&nbsp;</div>

     <div class="col-lg-3 col-sm-6">
        <img src="images/comp.png">
    </div>
</div>

Answer 1

我认为使用offset类来隔离列是更好的（更少标记）。但是，空visible-xs是在每行之间创建空格的唯一方法......

<div class="row">
    <div class="col-lg-3 col-sm-6">
        <img src="//placehold.it/800" class="img-responsive">
    </div>
    <div class="col-xs-12 visible-xs">&nbsp;</div>
     <div class="col-lg-3 col-sm-6 col-lg-offset-1">
        <img src="//placehold.it/800" class="img-responsive">
    </div>       
     <div class="col-xs-12 visible-xs">&nbsp;</div>
     <div class="col-lg-3 col-sm-6 col-lg-offset-1">
        <img src="//placehold.it/800" class="img-responsive">
    </div>       
    <div class="col-xs-12 visible-xs">&nbsp;</div>
    <div class="col-lg-3 col-sm-6">
        <img src="//placehold.it/800" class="img-responsive">
    </div>
</div>

http://www.bootply.com/120292

为移动和桌面引导不同的视图

1 个答案: