Question

我正在使用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>

Answer 1

<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。

Bootstrap 3文本中心不使用行

1 个答案: