Html 使用 Bootstrap 将内联元素排成一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30916838/
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
Fit inline elements in a row with Bootstrap
提问by Na?m Favier
I'm using Bootstrap 3 to design my website and I would like to fit a text input and 3 buttons horizontally in a div. Here is my markup :
我正在使用 Bootstrap 3 来设计我的网站，我想在一个 div 中水平放置一个文本输入和 3 个按钮。这是我的标记：
<div style="width: 400px">
<input class="form-control" type="text">
<a class="btn" href="#">Button 1</a>
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
</div>
But the text input spans to the whole div's width and the buttons get pushed underneath it.
但是文本输入跨越整个 div 的宽度，按钮被推到它下面。
I've tried setting the text input's display mode to inlineand inline-blockbut it didn't change anything.
我试过将文本输入的显示模式设置为inline，inline-block但它没有改变任何东西。
Help?
帮助？
回答by Tharaka Arachchige
回答by k32y
I noticed that the class="form-control"is responsible for the input spanning the whole width. Also you should remove the width='400px'style and use a bootstrap class or just make it bigger to contain the four elements.
我注意到class="form-control"负责跨越整个宽度的输入。此外，您应该删除width='400px'样式并使用引导程序类，或者只是使其更大以包含四个元素。
See this Fiddle
看到这个小提琴
Since you are using Bootstrap 3 you should try this:
由于您使用的是 Bootstrap 3，您应该试试这个：
<div style="width: 600px">
<div class="row">
<input class="col-md-3" type="text">
<a href="#" class="btn btn-default col-md-3">Button 1</a>
<a href="#" class="btn btn-default col-md-3">Button 2</a>
<a href="#" class="btn btn-default col-md-3">Button 3</a>
</div>
</div>
See the official bootstrap 3 docs
查看官方引导程序 3 文档
回答by Developer
Nowdays correct solution is to use flexhttps://getbootstrap.com/docs/4.0/utilities/flex/
现在正确的解决方案是使用flexhttps://getbootstrap.com/docs/4.0/utilities/flex/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-flex flex-row bg-info">
<div class="p-2 bg-warning">Flex item 1</div>
<div class="p-2 bg-danger">Flex item 2</div>
<div class="p-2 bg-secondary">Flex item 3</div>
</div>回答by kg_root
Put it inside a form tag like this
把它放在这样的表单标签中
<form class="form-inline" role="form">
<div style="width: 500px">
<input class="form-control" type="text">
<a class="btn" href="#">Button 1</a>
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
</div>
</form>
Also add more width or make the button/text smaller so all 3 can fit
还可以增加宽度或缩小按钮/文本，以便所有 3 个都适合
回答by emon
Your given code works according to your description. All the three button and text field are in the same line. May be you did not link the bootstrap library properly. Here is the code with bootstrap link
您给定的代码根据您的描述工作。所有三个按钮和文本字段都在同一行中。可能是您没有正确链接引导库。这是带有引导程序链接的代码
<head>
<script data-require="[email protected]" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div style="width: 400px">
<input type="text" class="form-control" />
<a href="#" class="btn">Button 1</a>
<a href="#" class="btn">Button 2</a>
<a href="#" class="btn">Button 3</a>
</div>
</body>
