在不同設備中水平對齊按鈕

我正在嘗試水平對齊使用CSS的按鈕。這裏是我的標記：在不同設備中水平對齊按鈕

<div class="modal-footer"> 
<div class="col-xs-8 footer-message"></div> 
<div class="col-xs-4 footer-controls"> 
    <button class="btn btn-primary" ng-click="savePrompt.close()">Cancel</button> 
    <button class="btn btn-primary" ng-click="savePrompt.go()">Abandon Changes</button> 
</div>

以下相關CSS。

但是，它在桌面上正確對齊，但在iPad和Android手機中，按鈕相對於其他按鈕。

.modal-footer { 
    padding: @modal-inner-padding; 
    border-top: 1px solid @modal-footer-border-color; 
    background: #000000; 
    color: white; 
    .footer-message{ 
     font-size: 2rem; 
    } 
    .footer-controls{ 
     text-align: right; 
    } 

    &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons 

    // Properly space out buttons 
    .btn + .btn { 
    margin-left: 5px; 
    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs 
    } 
    // but override that for button groups 
    .btn-group .btn + .btn { 
    margin-left: -1px; 
    } 
    // and override it for block buttons as well 
    .btn-block + .btn-block { 
    margin-left: 0; 
    } 
}

來源

2015-11-17 Abhijeet Sinha

請的是什麼，你現在有一個演示。發佈編譯後的CSS比LESS更好。 –

骯髒的方式，但我能夠通過更改類col-xs-4修復col-xs-12 –

這很好。您可以將其作爲答案發布。 –

嘗試做這個

<div class="modal-footer"> 
 
<div class="col-xs-8 footer-message"></div> 
 
<div class="col-xs-4 footer-controls"> 
 
    <div class="col-sm-6"> 
 
    <button class="btn btn-primary form-control" ng-click="savePrompt.close()">Cancel</button> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
    <button class="btn btn-primary form-control" ng-click="savePrompt.go()">Abandon Changes</button> 
 
    </div> 
 
</div>

來源

2015-11-17 13:09:34

在不同設備中水平對齊按鈕

回答

相關問題