Column Offset and centering not working in Small Screens（Bootstrap）

-1

我有一個列表，它需要以所有屏幕尺寸爲中心。我有以下代碼 -Column Offset and centering not working in Small Screens（Bootstrap）

<div class="container container-fluid.body-content"> 
    <div class="row"> 
     <h2 style="text-align:center;">Select your Campus</h2> 
    </div> 
    <div class="row"> 
     <div class="col-lg-6 col-lg-offset-3 col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 btn-group-vertical" style="background-color:#EAEBED;padding:2%;" id="dispcolleges" role="group" aria-label="..."> 
     <button type="button" class="btn btn-default" onclick="storeValue('4847453903781888','National Institute of Technology Karnataka')">National Institute of Technology Karnataka</button> 
     <button type="button" class="btn btn-default" onclick="storeValue('5743114304094208','Test')">Test</button></div> 
    </div> 
</div>

它在大屏幕和中等屏幕中偏移居中，但不在小屏幕上。我該如何解決？

的完整代碼，可以發現here

來源

2015-12-22 Prateek Narendra

更好地給我們一個小提琴而不是完整的代碼伴侶！ :) – NoobEditor

因爲對於具有完整12列的小屏幕 - 「col-sm-12 col-sm-offset-0」，您有零偏移量？更多信息在這裏 - http://getbootstrap.com/css/#grid-offsetting – Abhitalks

@Abhitalks即使沒有col-sm-offset-0，輸出也不會改變。還是一樣 –

試試這個：

<div class="container container-fluid.body-content"> 
    <div class="row"> 
    <h2 style="text-align:center;">Select your Campus</h2> 
    </div> 
    <div class="row"> 
     <div class="col-lg-6 col-lg-offset-3 col-sm-offset-3 col-sm-6 col-xs-10 col-md-6 col-md-offset-6 btn-group-vertical col-xs-offset-1" style="background-color:#EAEBED;padding:2%;" id="dispcolleges" role="group" aria-label="..."><button type="button" class="btn btn-default" onclick="storeValue('4847453903781888','National Institute of Technology Karnataka')">National Institute of Technology Karnataka</button><button type="button" class="btn btn-default" onclick="storeValue('5743114304094208','Test')">Test</button></div> 
    </div> 
</div>

來源

2015-12-22 07:11:40

的原因是類display: inline-block;btn-group-vertical

解決方法：添加display: inherit;您<div>。試試這個：

<div class="container container-fluid.body-content"> 
     <div class="row"> 
     <h2 style="text-align:center;">Select your Campus</h2> 
     </div> 
     <div class="row"> 
     <div class="col-lg-6 col-lg-offset-3 col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 btn-group-vertical" style="background-color:#EAEBED;padding:2%;display: inherit;" id="dispcolleges" role="group" aria-label="..."><button type="button" class="btn btn-default" onclick="storeValue('4847453903781888','National Institute of Technology Karnataka')">National Institute of Technology Karnataka</button><button type="button" class="btn btn-default" onclick="storeValue('5743114304094208','Test')">Test</button></div> 
     </div> 
    </div>

來源

2015-12-22 07:30:38

Column Offset and centering not working in Small Screens（Bootstrap）

回答

相關問題