Question

我有两个div对齐左边一个和右边另一个。但我希望div能够在小型设备中对齐中心。如何在bootstrap xs设备中将两个div居中。

HTML代码

<div class="row">
        <div class="col-md-6">
            <span class="search_title">Director <i class="fa fa-caret-down"></i></span>
        </div>
        <div class="col-md-6">
            <form class="form-group pull-right">
                <label>Categories &nbsp; </label>
                <select>
                    <option></option>
                    <option>Director</option>
                    <option>Producer</option>
                    <option>Actor</option>
                    <option>Actress</option>
                    <option>Child artist</option>
                </select>
            </form>
        </div>
    </div>

CSS代码

.search_title {font-size:18px; padding:3px 15px; text-align:center; border:1px solid #ff6000;}
.search_title i {position:absolute; bottom:-13px; left:63px; color:#ff6000;}

Answer 1

通常情况下，在较小的屏幕上，每个<div class="col-md-6">占据整个宽度。

如果你想要每个div的屏幕宽度的一半左右四分之一边距，那么你可以使用偏移量：

<div class="col-md-6 col-xs-offset-3 col-xs-6">
   ...
</div>

如何在xs中居中两个div

1 个答案: