Question

我正在尝试创建一个具有一些水平和内联字段的表单，找到最好的方式而不是与表单类一起尝试像另一个常规模板一样，我能够将标签和字段放在每个其他但他们没有占用所有可能的空间，并且互相触摸，我希望能够使用该行的所有空间，

这就是我所拥有的：谢谢你们

这是我想要删除的差距，我有点喜欢和div边缘玩，但我不认为这是正确的方法=（

<div class="col-lg-4" style="background-color:green">
<form>
    <div class="form-group">
        <div class="row">
            <label for="name" class="control-label">Name</label>
        </div>
        <div class="row">
            <input type="text" class="form-control" name="name" placeholder="name"/>
        </div>
    </div>

    <br>
    i want the birthday portion to be all one line all next to each other.
    using all the space like the Name field above, should i use some kind of <span>?

    <div class="form-group">
        <div class="row">
            <div class="col-lg-3">
                <label for="birthday" class="control-label">Birthday:</label>
            </div>
            <div class="col-lg-3">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="col-lg-3">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="col-lg-3">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>

    </div>
</form>

Answer 1

您可能希望apply(ft, 2, function(k) sum(k) / sum(ft[k!=0,]))*100 # comp Eng ICT # 58.33333 33.33333 38.46154在所有屏幕尺寸上使用4个相等的列。使用.col-xs-3只会在大屏幕（≥1200px）上创建列。否则，它将崩溃以显示一个在另一个之上。另外，要删除三个输入之间的间隙，您必须删除.col-lg-3类中的填充。

＆＃13;

.col-*

＆＃13;

div.col-xs-3 {
  padding-left:0;
  padding-right:0;
}/*Just as an example. You might not want to this for ALL .col-xs-3 classes. You can modify this just for the input divs*/

＆＃13;

Answer 2

在下面的代码中，我更改了一些内容以实现您想要的情况。我删除了一些行，因为你根本不需要所有这些行。 Bootstrap行调整您的网格，导致表单字段宽度的差异。

我最后为您编写了以下代码：

<div class="col-lg-4" style="background-color:green">
  <form>
    <div class="form-group">
      <label for="name" class="control-label">Name</label>
      <input type="text" class="form-control" name="name" placeholder="name"/>
    </div>

    <div class="form-group">
      <div class="row">
        <div class="col-lg-3">
          <label for="birthday" class="control-label">Birthday:</label>
        </div>
        <div class="col-lg-3">
          <input type="text" class="form-control" placeholder="year"/>
        </div>
        <div class="col-lg-3">
          <input type="text" class="form-control" placeholder="month"/>
        </div>
        <div class="col-lg-3">
          <input type="text" class="form-control" placeholder="day"/>
        </div>
      </div>
   </form>
</div>

如果你也想要生日＆＃39;在内联字段上方，您可以将类更改为：

<div class="form-group">
  <div class="row">
    <div class="col-lg-12">
      <label for="birthday" class="control-label">Birthday:</label>
    </div>
    <div class="col-lg-4">
      <input type="text" class="form-control" placeholder="year"/>
    </div>
    <div class="col-lg-4">
      <input type="text" class="form-control" placeholder="month"/>
    </div>
    <div class="col-lg-4">
      <input type="text" class="form-control" placeholder="day"/>
    </div>
  </div>

将4个字段与引导程序对齐

2 个答案: