引导不同的列相聚时XS屏幕

我有五个不同的列：引导不同的列相聚时XS屏幕

<div class="row"> 

    <div class="col-sm-3 col-xs-6"></div> 

    <div class="col-sm-2 col-xs-6"></div> 

    <div class="col-sm-2 col-xs-6"></div> 

    <div class="col-sm-2 col-xs-6"></div> 

    <div class="col-sm-3 col-xs-6"></div> 

</div>

所有内容具有width: 100%，所以规模并不是越大则预期，padding: 0px。

当屏幕是XS（小设备）时，其中一列（“疫苗/芯片”）停留在另一列下方，而不是传递到破坏结构的下一条线。下面

图像，以帮助：

Big screen (lg)

Phone screen (xs)

代码：

<div class="row" id="filters"> 

    <hr class="hr-between-animals" /> 

    <div class="col-sm-3 col-xs-6" style="margin-top:10px; padding:0"> 
    <b>Type of animal:</b> 
    <br /> 
    <input type="checkbox" /> Dog 
    <br /> 
    <input type="checkbox" /> Cat 
    <br /> 
    <input type="checkbox" /> Rabbit 
    <br /> 
    <input type="checkbox" /> Reptil 
    <br /> 
    <input type="checkbox" /> Bird 
    <br /> 
    <input type="checkbox" /> Fish 
    <br /> 
    <input type="checkbox" /> Rat 
    </div> 

    <div class="col-sm-2 col-xs-6" style="margin-top:10px; padding:0"> 
    <b>Size:</b> 
    <br /> 
    <input type="checkbox" /> Small 
    <br /> 
    <input type="checkbox" /> Medium 
    <br /> 
    <input type="checkbox" /> Large 
    <br/> 
    </div> 

    <div class="col-sm-2 col-xs-6" style="margin-top:10px; padding:0"> 
    <b>Vaccines/Chip:</b> 
    <br /> 
    <input type="checkbox" /> Vaccines 
    <br /> 
    <input type="checkbox" /> Chip 
    </div> 

    <div class="col-sm-2 col-xs-6" style="margin-top:10px; padding:0"> 
    <b>Gender:</b> 
    <br /> 
    <input type="checkbox" /> Female 
    <br /> 
    <input type="checkbox" /> Male 
    <br /> 
    <br /> 
    </div> 

    <div class="col-sm-3 col-xs-6" style="margin-top:10px; padding: 0"> 
    <b>Age:</b> 
    <br /> 
    <input type="text" id="amount" readonly style="border:0; color:#3D3D3D; background-color:transparent" /> 
    <div id="slider-range" style="border-color:#3D3D3D; border-   radius:5px; margin-top:10px"></div> 
    </div> 

</div>

来源

2016-02-26 Sofia Chaves

在引导每行的列数应该等于12.您的XS列等于30 – j08691

@ j08691我已经把超过12列成一排。例如，如果列是由服务器动态生成的，而您只想在其中引入一堆列，则会很有帮助。根据[文档]（https://getbootstrap.com/css/#grid），“如果超过12列放在一行内，每组额外的列将作为一个单位换行到一个新行“。这表明可以放置两个以上的列，因为它们只是换行。 –

@Andrew - 我没有说这是禁止的，但是它并不是真正意图使用列数超过12的。 – j08691

我认为另一种解决方案是在每12列之后插入<div class="visible-xs clearfix"></div>，以强制列成XS大小的行。像这样：

<div class="row"> 
    <div class="col-sm-3 col-xs-6"></div> 
    <div class="col-sm-2 col-xs-6"></div> 
    <div class="visible-xs clearfix"></div> 
    <div class="col-sm-2 col-xs-6"></div> 
    <div class="col-sm-2 col-xs-6"></div> 
    <div class="visible-xs clearfix"></div> 
    <div class="col-sm-3 col-xs-6"></div> 
</div>

来源

2016-02-26 21:52:22

非常完美！谢谢你，因为我不想破坏我期待的设计！再次感谢你 –

好了，row总列应12。在xs模式似乎你有5 x col-xs-6这就是30。尝试其他组合，以便总数为12。

来源

2016-02-26 21:42:50 Ioan

所以我应该用一个新的行将它们分开，但是出于移动屏幕的原因，我希望它们保留在一行中，就像在LG照片中一样，有没有办法做到这一点？ –

你应该使用'sm'，而不是'xs'。请参阅http://stackoverflow.com/questions/19828435/stacking-bootstrap-columns-over-each-other – Ioan

引导不同的列相聚时XS屏幕

回答

相关问题