CSS Bootstrap 3 右对齐选择输入组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24086926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 right align a select input group
提问by user1687074
I can't seem to figure out how to right align select input groups in bootstrap 3. No matter what i try it aligns on the right. If you look at the fiddle below, im trying to align the select and button inputs to the right of the gray box. Any help would be greatly appreciated.
我似乎无法弄清楚如何在引导程序 3 中正确对齐选择的输入组。无论我尝试什么，它都会在右侧对齐。如果您查看下面的小提琴，我会尝试将选择和按钮输入对齐到灰色框的右侧。任何帮助将不胜感激。
<body>
<div class="container">
<div class="row">
<div id="header-right-container" class="col-lg-3 col-md-4 col-sm-4 col-xs-12" style="background-color: #eee;">
<div class="row">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-globe"></span></span>
<select class="form-control input-sm" style="width:150px">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>
</div>
<div class="row">
<div class="btn-group">
<a id="headerUserButton" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" href="##">
<i class="glyphicon glyphicon-user"></i> User Name
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
<li><a href="#">Option A</a></li>
<li><a href="#">Option B</a></li>
<li><a href="#">Option C</a></li>
</ul>
</div><!--- /.btn-group --->
</div>
</div>
</div>
</div>
</body>
回答by ringstaff
Add pull-rightto your input-groupand btn-group. Then move style="width:150px"from form-controlto input-group.
添加pull-right到您的input-group和btn-group。然后style="width:150px"从 移动form-control到input-group。
回答by Vaibhav Magon
Add Width to input-group and put a pull-right to it. The select would be alligned to right.
将 Width 添加到 input-group 并在其上放置一个 pull-right。选择将向右对齐。
HTML:
HTML：
<body>
<div class="container">
<div class="row">
<div id="header-right-container" class="col-lg-3 col-md-4 col-sm-4 col-xs-12" style="background-color: #eee;">
<div class="row">
<div class="col-md-4 pull-right">
<div class="input-group pull-right" style="width: 200px;">
<span class="input-group-addon"><span class="glyphicon glyphicon-globe"></span></span>
<select class="form-control input-sm" style="width:150px">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="btn-group">
<a id="headerUserButton" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" href="##">
<i class="glyphicon glyphicon-user"></i> User Name
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
<li><a href="#">Option A</a></li>
<li><a href="#">Option B</a></li>
<li><a href="#">Option C</a></li>
</ul>
</div><!--- /.btn-group --->
</div>
</div>
</div>
</div>
</body>
