twitter-bootstrap-3 – Bootstrap 3文本中心不使用行

发布时间：2020-12-17 21:28:06 所属栏目：安全来源：网络整理

导读：我正在使用Bootstrap 3.我在行中使用了两列如col-md-4和col-md-2.现在我想把两列放在行中.我已经使用text-left作为col-md-2,因为它内部的按钮需要保持对齐.我使用以下代码来使列居中,但它对我不起作用. div class="jumbotron" div class="row text-center" d

我正在使用Bootstrap 3.我在行中使用了两列如col-md-4和col-md-2.现在我想把两列放在行中.我已经使用text-left作为col-md-2,因为它内部的按钮需要保持对齐.我使用以下代码来使列居中,但它对我不起作用.

<div class="jumbotron">
    <div class="row text-center">
        <div class="col-md-4">
            <div class="input-group input-group-lg">
                <div class="input-group-btn text-left">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">option 1<span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">option 1</a></li>
                        <li><a href="#">option 2</a></li>
                        <li><a href="#">option 3</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <input type="text" class="form-control">
            </div><!-- /input-group -->
        </div>
        <div class="col-md-2 text-left">
            <button type="button" class="btn btn-default btn-lg">  Search  <span class="glyphicon glyphicon-search"></span></button>
        </div>
    </div><!-- /row -->
</div>

解决方法

<div class="jumbotron">
<div class="row">
    <div class="col-md-4 col-md-offset-3"> //The one i added
        <div class="input-group input-group-lg">
            <div class="input-group-btn text-left">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">option 1<span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">option 1</a></li>
                    <li><a href="#">option 2</a></li>
                    <li><a href="#">option 3</a></li>
                </ul>
            </div><!-- /btn-group -->
            <input type="text" class="form-control">
        </div><!-- /input-group -->
    </div>
    <div class="col-md-2 text-left">
        <button type="button" class="btn btn-default btn-lg">  Search  <span class="glyphicon glyphicon-search"></span></button>
    </div>
</div><!-- /row -->

希望这Bootply有所帮助！另外看看这个wiki.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!