Bootstrap 3右对齐选择输入组
Bootstrap 3右对齐选择输入组
提问于 2014-06-07 00:46:49
我似乎不知道如何在bootstrap 3中右对齐选择输入组。无论我尝试什么，它都是右对齐的。如果你看下面的小提琴，我试图将选择和按钮输入对齐到灰色框的右边。任何帮助都将不胜感激。
fiddle
<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>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-06-07 01:52:21
将pull-right添加到您的input-group和btn-group。然后将style="width:150px"从form-control移动到input-group。
Here's a fiddle。
Stack Overflow用户
发布于 2014-06-07 01:17:42
将宽度添加到input-group，并向其添加一个右拉。select将被右对齐。
http://jsfiddle.net/MGD2y/
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24086926
复制相关文章
相似问题
腾讯云开发者
