Question

我使用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>

但是文本输入跨越整个div的宽度，按钮被推到它下面。

我已尝试将文字输入的显示模式设置为inline和inline-block，但它并没有改变任何内容。

帮助？

Answer 1

试试这个DEMO

<div class="form-inline">
    <div class="form-group">
        <input class="form-control" type="text">
    </div>
    <a class="btn btn-default" href="#">Button 1</a>
    <a class="btn btn-default" href="#">Button 2</a>
    <a class="btn btn-default" href="#">Button 3</a>
</div>

Answer 2

我注意到class="form-control"负责跨越整个宽度的输入。此外，您应该删除width='400px'样式并使用引导类，或者只是将其设置为更大以包含四个元素。

请参阅此Fiddle

由于你使用的是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>

参见官方bootstrap 3 docs

Answer 3

将它放在像这样的表单标签中

<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>

还可以添加更多宽度或使按钮/文本更小，以便所有3都适合

Answer 4

您的代码根据您的描述运作。所有三个按钮和文本字段都在同一行。可能是你没有正确链接bootstrap库。这是带引导链接的代码

<head>
  <script data-require="jquery@2.1.3" 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>

Answer 5

如今正确的解决方案是使用flex https://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>

使用Bootstrap将行内联元素连接起来

5 个答案: