center-block with btn-group 在手机上

Question

我正在尝试将 div 块居中对齐，它在网络上运行良好，但在移动设备上效果不佳:(

这是我的代码：

    <div class="center-block">
        <div class="btn-group">
        <label class="btn btn-success vertical-align" ng-model="checkModel.left" btn-checkbox>1</label>
        <label class="btn btn-success vertical-align" ng-model="checkModel.middle" btn-checkbox>2 and Best and all</label>
        <label class="btn btn-success vertical-align" ng-model="checkModel.left" btn-checkbox>3</label>
        <label class="btn btn-success vertical-align" ng-model="checkModel.middle" btn-checkbox>4</label>
        <label class="btn btn-success vertical-align" ng-model="checkModel.left" btn-checkbox>5</label>
        </div>
    </div>

有出路吗？

Answer 1

我使用了 bootply，我相信问题出在文本上（最好的和所有的......）所以解决这个问题的方法是使用 span 将它隐藏在小屏幕上并且只显示最好的也许？

<div class="center-block">
        <div class="btn-group">
        <label class="btn btn-success vertical-align" ng-model="checkModel.left" btn-checkbox>1</label>
        <label class="btn btn-success vertical-align" ng-model="checkModel.middle" btn-checkbox>2 
         <span class="hidden-xs">and</span> Best <span class="hidden-xs">and all</span></label>
        <label class="btn btn-success vertical-align" ng-model="checkModel.left" btn-checkbox>3</label>
        <label class="btn btn-success vertical-align" ng-model="checkModel.middle" btn-checkbox>4</label>
        <label class="btn btn-success vertical-align" ng-model="checkModel.left" btn-checkbox>5</label>
        </div>
    </div>

jsfiddle

Answer 2

您可以将 center-block 更改为 text-center 以使其工作。

<div class="text-center">
    <div class="btn-group">
    <label class="btn btn-success vertical-align" ng-model="checkModel.left" btn-checkbox>1</label>
    <label class="btn btn-success vertical-align" ng-model="checkModel.middle" btn-checkbox>2 and Best and all</label>
    <label class="btn btn-success vertical-align" ng-model="checkModel.left" btn-checkbox>3</label>
    <label class="btn btn-success vertical-align" ng-model="checkModel.middle" btn-checkbox>4</label>
    <label class="btn btn-success vertical-align" ng-model="checkModel.left" btn-checkbox>5</label>
    </div>
</div>

http://jsfiddle.net/bmpzcapt/

center-block with btn-group 在手机上

center-block with btn-group on mobile

twitter-bootstrap

angularjs

angular-ui-bootstrap

twitter-bootstrap-3

jsfiddle