自举输入组按钮右对齐
问题描述:
任何想法如何将搜索按钮对齐到搜索框旁边?
代码是
<div class="form-group">
<label class="col-lg-2 control-label" for="inputLoginSearch">Search for HOA</label>
<div class="col-lg-10">
<div class="input-group">
<input id="inputLoginSearch" class="form-control" type="text" placeholder="Enter search phrase">
<span class="input-group-btn">
<button class="btn btn-info" type="button">Search</button>
</span>
</div>
</div>
</div>
谢谢
编辑 - 页面添加了完整的标记“它看起来像你的文章大多是代码:请添加更多的细节”原谅填充,否则它赢得了” T型柱 - 感叹
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<div id="mainDiv" runat="server" class="panel-body">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Standard Login</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<%-- Start of Standard Login--%>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div id="StandardLoginForm" role="form" class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputLoginSearch">Search for HOA</label>
<div class="col-lg-10">
<div class="input-group">
<input id="inputLoginSearch" class="form-control" type="text" placeholder="Enter search phrase">
<span class="input-group-btn" >
<button class="btn btn-info" type="button">Search</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="select">HOA</label>
<div class="col-lg-10">
<select class="form-control" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputUserName">User Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputUserName" type="text" placeholder="User Name">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputPassword">Password</label>
<div class="col-lg-10">
<input class="form-control" id="inputPassword" type="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-primary" type="submit">Login</button>
</div>
</div>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<%--End of Standard Login--%>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">HOA Manager Integrated Login</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<%-- Start of Standard Login--%>
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<%--End of Standard Login--%>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
由于某种原因,无法添加注释!
答
DavidG是对的问题 - 这个问题是针对输入去除最大宽度使他们正确的整个页展开的 - 所以我找到了解决办法是离开的最大宽度,和只需将input-group div更改为最大宽度(允许按钮),然后在宽度上设置输入:100%;
这似乎工作得很好。
<div class="form-group form-group-sm">
<label class="col-lg-2 control-label" for="inputLoginSearch">Search for HOA</label>
<div class="col-lg-10">
<div class="input-group" style="max-width: 358px;">
<input id="inputLoginSearch" runat="server" class="form-control" type="text" placeholder="Enter search phrase" style="width: 100%;"/>
<span class="input-group-btn">
<button id="SearchButton" runat="server" class="btn btn-info" type="button">Search</button>
</span>
</div>
</div>
</div>
在默认情况下引导的CSS这对准http://jsbin.com/hodeqo/1/ - 你还有其他的CSS这样做 – Christina 2014-10-31 17:07:14
唯一的其他CSS文件的site.css(默认为创建项目时) - 我将它从项目中排除并再次运行 - 同样的问题 – gchq 2014-10-31 17:11:54
同意@Christina,您可以使用一些自定义CSS或自定义Bootstrap。正如所示,你的代码看起来很好http://www.bootply.com/S12VGY7DCx – DavidG 2014-10-31 17:16:41