Bootstrap 3 - 使用具有多个 .form-group 和文本的 .container-fluid 的全宽

Question

我有一个使用 Bootstrap 3.3.6 的网站。它有一个“注册时事通讯”框，目前看起来像这样：

我遇到的问题是，我希望文本“注册时事通讯”与表单字段出现在同一行 - 因此所有内容都水平对齐 - 在大/中型设备上。

但是，当它涉及到一个小型设备时，我希望所有东西都堆叠起来，我已经开始工作了，看起来像这样：

所以我使用的标记如下：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 text-center">
        <form>
            <h4>Sign up for Newsletter</h4>


                <div class="form-group">
                    <input type="text" name="firstName" maxlength="50" class="form-control input-lg" placeholder="First Name" required>
                </div>

                <div class="form-group">
                    <input type="text" name="lastName" maxlength="50" class="form-control input-lg" placeholder="Last Name" required>
                </div>

                <div class="form-group">
                    <input type="text" name="company" maxlength="100" class="form-control input-lg" placeholder="Company" required>
                </div>

                <div class="form-group">
                    <input type="email" name="email" maxlength="250" class="form-control input-lg" placeholder="Email" required>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-lg">Send</button>
                </div>
        </form>
     </div>
</div>

即使我将文本“注册时事通讯”放在 .form-group 中，它仍然会出现在表单字段上方的第一行。

我怎样才能在 1 行中获取所有内容？显然有足够的空间在第一个屏幕截图上进行这项工作，这是一个中等设备。

我考虑过使用 .col- 类，但这似乎不起作用，因为我需要其中的 6 个，它们只有 .col-md-2 使得表单字段如此之小，以至于 placeholder 属性文本将不可读.

请问有人可以帮忙吗？

Answer 1

一种方法是结合使用单个form-group 和form-inline。有了它，您可以将您的代码大大压缩成类似于下面的内容：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="form-group form-inline text-center">
  <h4 class="form-control-static">Sign up for Newsletter</h4><br class="visible-xs visible-sm" clear="all" />
  <input type="text" name="firstName" maxlength="50" class="form-control input-lg" placeholder="First Name" required><br class="visible-xs visible-sm" />
  <input type="text" name="lastName" maxlength="50" class="form-control input-lg" placeholder="Last Name" required><br class="visible-xs visible-sm" />
  <input type="text" name="company" maxlength="100" class="form-control input-lg" placeholder="Company" required><br class="visible-xs visible-sm" />
  <input type="email" name="email" maxlength="250" class="form-control input-lg" placeholder="Email" required><br class="visible-xs visible-sm" />
  <button type="submit" class="btn btn-primary btn-lg">Send</button>
</div>

将form-control-static 应用到您的标题文本将使其以类似于带有form-control 的元素的方式显示。 <br> 的类使其仅在 xs 和 sm 断点中可见，并允许输入之间的间距。

它有效......但如果我说实话，它有点难看。就提供响应式、灵活的断点而言，Grid 可能是一个更好的选择……但您可能不得不在输入大小上做出妥协（如您所指出的），或者通过断点以不同方式堆叠它们。

如果您想使用 Grid 来构建它，但您可能会执行以下操作：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-2 text-center">
      <h4 class="form-control-static">Sign up for Newsletter</h4><br class="visible-xs visible-sm" clear="all" />
    </div>

    <div class="col-xs-12 col-sm-6 col-md-2 text-center">
      <input type="text" name="firstName" maxlength="50" class="form-control input-lg" placeholder="First Name" required><br class="visible-xs visible-sm" clear="all" />
    </div>

    <div class="col-xs-12 col-sm-6 col-md-2 text-center">
      <input type="text" name="lastName" maxlength="50" class="form-control input-lg" placeholder="Last Name" required><br class="visible-xs visible-sm" clear="all" />
    </div>

    <div class="col-xs-12 col-sm-6 col-md-2 text-center">
      <input type="text" name="company" maxlength="100" class="form-control input-lg" placeholder="Company" required><br class="visible-xs visible-sm" clear="all" />
    </div>

    <div class="col-xs-12 col-sm-6 col-md-2 text-center">
      <input type="email" name="email" maxlength="250" class="form-control input-lg" placeholder="Email" required><br class="visible-xs visible-sm" clear="all" />
    </div>

    <div class="col-xs-12 col-sm-12 col-md-2 text-center">
      <button type="submit" class="btn btn-primary btn-lg btn-block">Send</button>
    </div>
  </div>
</div>

在此代码中，网格在不同的断点处发生变化，并以单行（中和更大）或每行 2 个（小）或每行 1 个（XS）显示表单元素。