Html Bootstrap：如何在输入组旁边放置按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31850975/
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: How to place button next to input-group
提问by Beakie
I can't work out (conforming to "proper bootstrap") how to get a button to sit next to an input-group within a div.
我无法解决（符合“适当的引导程序”）如何让按钮位于 div 中的输入组旁边。
They need to be center aligned.
它们需要居中对齐。
This is what I want it to look like...
这就是我想要的样子……
This is what is happening...
这就是正在发生的事情......
Here is my current code.
这是我当前的代码。
<div>
<div>
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
I have created this js fiddle... https://jsfiddle.net/ptwbn2av/
我已经创建了这个 js 小提琴... https://jsfiddle.net/ptwbn2av/
Thanks!
谢谢！
采纳答案by Ozgur Bar
You could also try the pull-leftclass.
你也可以试试pull-left类。
The classes .pull-left and .pull-right also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to .media-left and .media-right, except that .media-right should be placed after the .media-body in the html.
类 .pull-left 和 .pull-right 也存在并且以前用作媒体组件的一部分，但从 v3.3.0 开始不推荐用于该用途。它们大致相当于 .media-left 和 .media-right，只是 .media-right 应该放在 html 中的 .media-body 之后。
The html:
html：
<div>
<div class="pull-left">
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
You can use:
您可以使用：
style="margin-right:5px"
to add some spacing after the div, and then the new mark-up would be as follows:
在 div 后添加一些间距，然后新的标记如下：
<div>
<div class="pull-left" style="margin-right:5px">
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
回答by Cyan Baltazar
With your current code, you can use the flexbox.
使用您当前的代码，您可以使用 flexbox。
A powerful CSS layout module that gives us an efficient and simple way to lay out and align things.
一个强大的 CSS 布局模块，它为我们提供了一种高效且简单的方式来布局和对齐事物。
<div class="flex">
<div>
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
.flex {
display: flex;
flex-direction: row;
}
This is the screenshot of the result: 
这是结果的屏幕截图：
You can learn more about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
您可以在此处了解有关 flexbox 的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Cheers!
干杯!
回答by Sweeper
divs are block elements, which means that they align vertically. For example,
divs 是块元素，这意味着它们垂直对齐。例如，
<div>
Hello World!
</div>
<div>
Goodbye World!
</div>
would result in:
会导致：
Hello World!
Goodbye World!
So, in order to make the elements flow horizontally, you have to make the divinlinebecause inline elements can flow horizontally, such as text and <span>.
所以，为了让元素水平流动，你必须做div内联，因为内联元素可以水平流动，比如 text 和<span>.
You can add a rule to your css:
您可以在 css 中添加规则：
#delete-button {
display:inline-block;
}
And of course, you should add an id attribute to the button.
当然，您应该为按钮添加一个 id 属性。
If the above doesn't work, you should consider putting all the elements in one divbecause <button>, <input>, and <span>are all inline elements.
如果上面没有做的工作，你应该考虑把所有的元素于一体div，因为<button>，<input>和<span>都是内联元素。
回答by David Lemon
Just add the grid classes. Try this
只需添加网格类。尝试这个
<div>
<div class="col-xs-2">
<button type="button" class="btn">Delete</button>
</div>
<div class="col-xs-10">
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
回答by Salim Malik
<div class="col-md-12">
<div class="col-md-1">
<button type="button" class="btn">Delete</button>
</div>
<div class="col-md-11">
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
