如何在Bootstrap 3.4的同一行上创建输入和按钮？

debugcn 发表于 Dev

巴罗斯

我已经看到了一些与此问题类似的问题，但是，我认为这些问题中提供的答案都没有向我提示我所寻找的正确方向。

我要创建的是同一行上的输入和按钮。无论父元素有多大，输入都将始终需要占用尽可能多的空间。调整屏幕大小时，输入和按钮元素仍应保持内联（即响应）。结果如下所示：

这些是我可能想出的答案，但是这些都不是我想要的：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <br />
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-body">
          <p>
            Not like this please:
          </p>
          <div class="form-group">
            <label for="exampleInputLabel1">Label</label>
            <input type="text" class="form-control" id="exampleInputText1" placeholder="Your value">
          </div>
          <button type="submit" class="btn btn-default">Action</button>
          <hr style="border-color: #ddd;" />
          <p>
            Also not like this please:
          </p>
          <div class="form-inline">
            <div class="form-group">
              <label for="exampleInputLabel2">Label</label>
              <input type="text" class="form-control" id="exampleInputLabel2" placeholder="Your value">
            </div>
            <div class="form-group">
              <label for="exampleInputLabel3">Label</label>
              <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Your value">
            </div>
            <button type="submit" class="btn btn-default">Action</button>
          </div>
          <hr style="border-color: #ddd;" />
          <p>
            Or also not this:
          </p>

          <div class="input-group">
            <input type="text" class="form-control" placeholder="Your value">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">Action</button>
            </span>
          </div>
        </div>
        <!--panel-body end-->
      </div>
    </div>
  </div>
</div>

也许我可以使用flexbox，但是如果其他任何人可以通过将我引导到适当的解决方案来帮助我，我将非常有兴趣了解与此相关的任何内容。

我已经检查过的一些问题：

安东尼斯·帕帕达基斯（Antonis Papadakis）

有很多方法可以做到这一点。首先，我建议您使用Bootstrap 4，因为它具有更多有用的类并使用flexbox。另外，考虑将js放在</body>标签之前，以实现更好的页面加载，如Bootstrap文档建议的那样：

将以下内容<script>s放在页面末尾，紧接在结束标记之前，以启用它们。jQuery必须首先出现，然后是Popper.js，然后是我们的JavaScript插件。

Bootstrap 3（带有自定义类）：

.my-flex {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .my-flex .input-container {
    flex-grow: 1;
  }

  .my-flex button {
    margin-left: 10px;
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <div class="container">
    <br />
    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-body">
            <div class="form-group my-flex">
              <div class="input-container">
                <label for="exampleInputLabel1">Label</label>
                <input type="text" class="form-control" id="exampleInputText1" placeholder="Your value">
              </div>
              <button type="submit" class="btn btn-default">Fire this button</button>
            </div>

          </div>
          <!--panel-body end-->
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>

另一个解决方案：

  .my-flex .input-container {
    flex-basis: calc(100% - 75px);
  }

这flex-basis: calc(100% - 75px)意味着输入将占用所有可用空间减去按钮宽度（+边距）。

另一个解决方案：

  .my-flex .input-container {
    flex-basis: 85%;
  }

  .my-flex button {
    flex-basis: 15%;
    margin-left: 10px;
  }

引导程序4：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <br />
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="form-row align-items-end">
              <div class="form-group col">
                <label for="exampleInputLabel1">Label</label>
                <input type="text" class="form-control" id="exampleInputText1" placeholder="Your value">
              </div>

              <div class="form-group col-auto">
                <button type="submit" class="btn btn-light">Action</button>
              </div>
            </div>
          </div>
          <!--panel-body end-->
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。