只有当设备宽度在Bootstrap中的某个宽度以下时，是否可以在div中居中对齐内容？

Question

我有一个使用Bootstrap的表单来执行响应式样式。我在一个col-md-6 div中有输入标签，输入本身在另一个col-md-6 div中。我想做的是在col-md和更大的时候将某些元素左对齐，在col-sm及以下时使用中心对齐。

以下是表单在全屏模式下的外观快照：

这就是屏幕很小时的样子：

理想情况下，我想通过Bootstrap直接处理这个功能，但如果不可能，我不知道如何从头开始这样做。如果我在第一时间出现这个错误的任何其他建议将不胜感激。

Answer 1

我相信 this is what you want（在jsFiddle中，我在col-xs-*处截止，但这可以在@media查询中更改。）

＆＃13;

＆＃13;

@media (max-width: 991px){
    .form label {
        width: 100%;
        text-align: center;
    }
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <form class="form" role="form">
                <div class="row">
                    <div class="col-xs-12 col-sm-6">
                        <label>Your T-Shirt Size</label>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <select class="form-control">
                            <option selected="true"></option>
                            <option>Small</option>
                            <option>Medium</option>
                            <option>Large</option>
                        </select>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <label>Additional Guests</label>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <select class="form-control">
                            <option selected="true"></option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                        </select>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <label>Does anyone in your party require any special accommodations?</label>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <textarea class="form-control"></textarea>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

＆＃13;

＆＃13;

＆＃13;