引導不同的列相聚時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

@loan但我認爲她希望xs，因爲她希望它留在移動設備上的線。如果你使用sm，它會分成不同的行。 –

引導不同的列相聚時XS屏幕

回答

相關問題