Question

我尝试使用Bootstrap 3创建一个简单的表单，人们可以在这里注册一个小事件。在这个表格上，他们还应该能够表明他们是否想要一件或多件T恤，以及他们想要订购哪种尺码。我不是HTML，CSS和Javascript的新手，但我对Bootstrap很新。虽然白天我是程序员，但我主要编写REST服务，所以我的设计技巧相当有限。使用w3schools和其他教程网站我已经到达了这个：

    <div class="form-group form-group-sm">
        <p class="help-block">Please select the number of T-shirts per size you would like to order.</p>
        <label class="col-xs-1" for="shirt-s">S</label>
        <div class="col-xs-1">
            <input class="form-control" type="text" id="shirt-s">
        </div>
        <label class="col-xs-1" for="shirt-m">M</label>
        <div class="col-xs-1">
            <input class="form-control" type="text" id="shirt-m">
        </div>
        <label class="col-xs-1" for="shirt-l">L</label>
        <div class="col-xs-1">
            <input class="form-control" type="text" id="shirt-l">
        </div>
        <label class="col-xs-1" for="shirt-xl">XL</label>
        <div class="col-xs-1">
            <input class="form-control" type="text" id="shirt-xl">
        </div>
        <label class="col-xs-1" for="shirt-xxl">XXL</label>
        <div class="col-xs-1">
            <input class="form-control" type="text" id="shirt-xxl">
        </div>
        <div class="col-xs-2">&nbsp;</div>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>

见jsfiddle：

https://jsfiddle.net/tonvanbart/83nbny8h/5/

这不是世界上最漂亮的，但我可以忍受它。我的主要问题是：为什么提交＆＃39;按钮不在其自己的行中但在输入字段后内联？起初我以为我必须得到总共12列而我只有10列。但是添加一个带有不间断空格的2列div并没有帮助，并添加了<br>标签也没有效果。

此外，虽然我可以忍受这种情况（对于一群非正式的，非常了解彼此的人来说），如果有人可以给我一个关于如何让T恤尺码指标更接近的指针他们各自的输入字段，这将是伟大的。先感谢您。

如果您需要更多信息，请随时告诉我。

Answer 1

这里是固定代码：

https://jsfiddle.net/ccx9x7om/1/

我添加了以下CSS

.row .form-group label, .row .form-group input {
  display: inline-block;
}

.row .form-group input {
  width: 50%;
}

button {
  margin: 25px;
}

为了正确使用bootstrap的列，您需要将它们包装成一行，并将所有行包装在.container或.container-fluid内。我将标签移动到各自的.col-xs-2内，然后将所有内容包裹在所需的上述div中。

Answer 2

另一种可以做到这一点的方法是将列嵌套，以便将表单分成两半，这将大大减少它使用的屏幕空间，并使输入更接近，同时保持对视口的响应。

这只是跟随Bootstrap通常遵循的容器/行/列布局。请参阅Nesting Columns。

*注意：form-group类不是必需的，只需在输入周围添加填充。

请参阅FullPage上的工作代码段。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form>
    <h2>Order a Shirt</h2>
    <div class="row">
      <div class="col-sm-6">

        <div class="form-group">
          <label for="name">Name</label>
          <input type="password" class="form-control" id="name" placeholder="Your Name">
        </div>

        <div class="form-group">
          <label for="email">Email address</label>
          <input type="email" class="form-control" id="email" placeholder="Email address (never shown)">
        </div>

      </div>

      <div class="col-sm-6">
        <div class="row">

          <div class="col-xs-4 col-sm-4">
            <div class="form-group">
              <label for="shirt-s">S</label>
              <input class="form-control" type="text" id="shirt-s">
            </div>
          </div>

          <div class="col-xs-4 col-sm-4">
            <div class="form-group">
              <label for="shirt-m">M</label>
              <input class="form-control" type="text" id="shirt-m">
            </div>
          </div>

          <div class="col-xs-4 col-sm-4">
            <div class="form-group">
              <label for="shirt-l">L</label>
              <input class="form-control" type="text" id="shirt-l">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-4 col-sm-4">
            <div class="form-group">
              <label for="shirt-xl">XL</label>
              <input class="form-control" type="text" id="shirt-xl">
            </div>
          </div>

          <div class="col-xs-4 col-sm-4">
            <div class="form-group">
              <label for="shirt-xxl">XXL</label>
              <input class="form-control" type="text" id="shirt-xxl">
            </div>
          </div>

          <div class="col-xs-4 col-sm-4">
            <div class="form-group">
              <label>Order Now</label>
              <button type="submit" class="btn btn-success btn-block btn-submit">Submit</button>
            </div>
          </div>

          <div class="col-xs-12">
            <p class="help-block">Please select the number of T-shirts per size you would like to order.</p>
          </div>

        </div>
      </div>
    </div>

  </form>
</div>

＆＃13;

使用Bootstrap 3为内联表单输入样式

2 个答案: