bootstrap：使用按钮对齐输入

作者: 张三岁
发布时间: 2025-01-10 10:36:59 (1月前)
转自：

10 条回复

0#
回复此人
Innate Mind | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我也在努力解决同样的问题。我使用的bootstrap类不适合我。我想出了一个解决方法，如下所示： </p> <pre> <code> <form action='...' method='POST' class='form-group'> <div class="form-horizontal"> <input type="text" name="..." class="form-control" placeholder="Search People..." style="width:280px;max-width:280px;display:inline-block"/> <button type="submit" class="btn btn-primary" style="margin-left:-8px;margin-top:-2px;min-height:36px;"> <i class="glyphicon glyphicon-search"></i> </button> </div> </form> </code> </pre> <P> 基本上，我覆盖了“form-control”类的display属性，并使用其他样式属性来校正大小和位置。 </p> <P> 以下是结果： </p> <P> <a href="https://i.stack.imgur.com/JqPBh.jpg" rel="noreferrer"> <img src =“https://i.stack.imgur.com/JqPBh.jpg”alt =“在此输入图片说明”/> </A> </p> </DIV>

编辑
1#
回复此人
Charizard | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用的<strong> .FORM内联 </强> =这将左对齐标签和内联块控件，以实现紧凑的布局 <BR/> <BR/> 例： <a href="http://jsfiddle.net/hSuy4/292/"> http://jsfiddle.net/hSuy4/292/ </A> </p> <pre> <code> <div class="form-inline"> <input type="text"> <input type="button" class="btn" value="submit"> </div> </code> </pre> <P> 的<strong> .FORM水平 </强> =右对齐标签并将它们浮动到左侧，使它们与控件显示在同一行上，这对于2列表单布局更好。 </p> <pre> <code> (e.g. Label 1: [textbox] Label 2: [textbox] : [button] ) </code> </pre> <P> 例子： <a href="http://twitter.github.io/bootstrap/base-css.html#forms"> http://twitter.github.io/bootstrap/base-css.html#forms </A> </p> </DIV>

编辑
2#
回复此人
易米烊光 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> style="padding-top: 8px" </code> </pre> <P> 使用它可以在你的行中向上或向下移动你的div。为我创造奇迹。 </p> </DIV>

编辑
3#
回复此人
是吗@ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只是抬头，似乎有一个特殊的CSS类为此调用 <code> form-horizontal </code> </p> <P> input-append有另一个副作用，它将font-size降为零 </p> </DIV>

编辑
4#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H2> Twitter Bootstrap 3 </H2> <P> 如@abimelex的答案所示，输入和按钮可以使用 <code> .input-group </code> 课程（见 <a href="http://getbootstrap.com/components/#input-groups-buttons" rel="noreferrer"> http://getbootstrap.com/components/#input-groups-buttons </A> ）： </p> <H3> 左侧的组按钮 </H3> <pre> <code> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <input type="text" class="form-control"> </div> </code> </pre> <H3> 右侧的组按钮 </H3> <pre> <code> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </code> </pre> <P> 已添加此解决方案以使我的答案保持最新，但请坚持您的投票 <a href="https://stackoverflow.com/a/22592382/681807"> @abimelex提供的答案 </A> 。 </p> <HR /> <H2> Twitter Bootstrap 2 </H2> <P> Bootstrap提供了一个 <code> .input-append </code> class，作为包装元素，并为您纠正： </p> <pre> <code> <div class="input-append"> <input name="search" id="search"/> <button class="btn">button</button> </div> </code> </pre> <P> 正如@OleksiyKhilkevich在他的回答中指出的那样，还有第二种方法可以对齐 <code> input </code> 和 <code> button </code> 通过使用 <code> .form-horizontal </code> 类： </p> <pre> <code> <div class="form-horizontal"> <input name="search" id="search"/> <button class="btn">button</button> </div> </code> </pre> <H3> 差异 </H3> <P> 这两个类之间的区别在于 <code> .input-append </code> 将放置 <code> button </code> 反对 <code> input </code> 元素（所以它们看起来像是附着在一起），在哪里 <code> .form-horizontal </code> 会在它们之间留一个空格。 </p> <P> <B> - 注意 - </B> </p> <P> <EM> 允许的 <code> input </code> 和 <code> button </code> 元素彼此相邻而没有间距， <code> font-size </code> 已经设定为 <code> 0 </code> 在里面 <code> .input-append </code> class（这将删除之间的白色间距） <code> inline-block </code> 元件）。这可能会对字体大小产生负面影响 <code> input </code> element如果要使用覆盖默认值 <code> em </code> 要么 <code> % </code> 测量。 </EM> </p> </DIV>

编辑
5#
回复此人
记忆只剩空城 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我首先尝试过并最终得到一些我想分享的变化。这是适用于我的代码（查找附带的屏幕截图）： </p> <pre> <code> <div class="input-group"> <input type="text" class="form-control" placeholder="Search text"> <span class="input-group-btn" style="width:0;"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </code> </pre> <P> <a href="https://i.stack.imgur.com/N99G9.png" rel="noreferrer"> <img src =“https://i.stack.imgur.com/N99G9.png”alt =“在此处输入图片说明”/> </A> </p> <P> 如果你想看到它工作，只需在你的编辑器中使用下面的代码： </p> <pre> <code> <html> <head> <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' /> </head> <body> <div class="container body-content"> <div class="form-horizontal"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search text"> <span class="input-group-btn" style="width:0;"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> </div> </body> </html> </code> </pre> <P> 希望这可以帮助。 </p> </DIV>

编辑
6#
回复此人
一腔诗意喂了狗 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> <form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail3">Email address</label> <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"> </div> <button type="submit" class="btn btn-default">Sign in</button> </form> </code> </pre> </DIV>

编辑
7#
回复此人
！啊啊 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我尝试了以上所有代码，但没有一个修复我的问题。这对我有用。我使用了input-group-addon。 </p> <pre> <code> <div class = "input-group"> <span class = "input-group-addon">Go</span> <input type = "text" class = "form-control" placeholder="you are the man!"> </div> </code> </pre> </DIV>

编辑
8#
回复此人
别闹 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 没有直接相关，除非你有类似的代码，但我只是注意到一个奇怪的行为形式 - 内联，bootstrap 3.3.7 </p> <P> 我没有使用行和单元格，因为它是一个桌面项目，如果开始标记在表格下面（在这种情况下）： </p> <pre> <code> <table class="form-inline"> <form> <tr> </code> </pre> <P> 表单元素将堆叠。 </p> <P> 切换并正确排列。 </p> <pre> <code> <form> <table class="form-inline"> <tr> </code> </pre> <P> Safari 10.0.2和最新的Chrome没有任何区别。也许我的布局错了，但不是很宽容。 </p> </DIV>

编辑

登录后才能参与评论