更改手機上的引導程序佈局

我想更改手機上模板的佈局。現在我的佈局是更改手機上的引導程序佈局

[2] [7] [3]

，我想改變它到

[12]

[7] [5]

僅限手機。

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"></div> 
    <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7"></div> 
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"></div> 
</div>

我知道這些改變應該在sm和xs類上完成。對此有何幫助？

來源

2015-11-10 George

它並不清楚你的要求。你嵌套的列似乎沒有任何理由，如果你打算將第一列從2擴展到12，你不希望最後一列是5而不是3，以便使用可用空間產生的？請澄清你正在努力完成的事情。 – vanburen

@vanburen我需要改變第一個嵌套div在移動時取整個寬度（12），並將最後一個從3改爲5。 – George

你只需要改變最小的斷點列類（除非你想在不同的斷點，要做到這一點）：

col-sm-2 to col-xs-12和col-sm-3 to col-xs-5。

見例如

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<hr> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-2"> 
 
     <div class="alert alert-warning">2 to 12</div> 
 
    </div> 
 
    <div class="col-xs-7 col-sm-7"> 
 
     <div class="alert alert-info">7</div> 
 
    </div> 
 
    <div class="col-xs-5 col-sm-3"> 
 
     <div class="alert alert-danger">3 to 5</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<hr>

來源

2015-11-10 00:45:52 vanburen

更改手機上的引導程序佈局

回答

相關問題