Kan*_*ngo 4 twitter-bootstrap-3
我正在使用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>
Run Code Online (Sandbox Code Playgroud)
<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 -->
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
26798 次 |
最近记录: |