Question

我正在用这段代码制作一个简单的表格：

function (augend, addend){ return  augend + addend; }

看起来像这样：

您可以看到输入与jumbotron不对齐，这是因为输入不会在填充处停止：

我该如何解决这个问题？

Answer 1

您可以使用解决方案

<div class="container">
    <div class="jumbotron" style="width:100%">
        <h1>
            ConfigTool Web Interface
        </h1>
        <p>
            Edit the config variables here and click save.
        </p>
    </div>

    <div class="form-group row">
      <div class="col-2">
        <label>Name:</label>
      </div>
      <div class="col-10">
        <input class="form-control" type="text" />
      </div>
    </div>
</div>

您应该在div标签内使用col-*

Answer 2

应该为输入控件（和标签）周围的元素提供列类。 Bootstrap网格系统的工作原理如下：
div.container＆gt; div.row＆gt; div.col-*＆gt; content

<div class="container">
    <div class="jumbotron" style="width:100%">
        <h1>
            ConfigTool Web Interface
        </h1>
        <p>
            Edit the config variables here and click save.
        </p>
    </div>
    <div class="form-group row">
        <div class="col-2">
            <label>Name:</label>

        </div>
        <div class="col-10">
            <input class="form-control" type="text" />
        </div>
    </div>
</div>

Answer 3

您已在input元素中添加了Bootstrap的预定义网格类。因此，Grid类填充应用于input元素。您将需要使用单独的div元素创建网格类。然后将input元素放在这个div元素中。

<div class="container">
    <div class="jumbotron" style="width:100%">
        <h1>
            ConfigTool Web Interface
        </h1>
        <p>
            Edit the config variables here and click save.
        </p>
    </div>
    <div class="form-group row">
        <label class="col-2">Name:</label>
        <div class="col-10">
        <input class="form-control" type="text" />
        </div>
    </div>
</div>

另外，请查看此官方引导程序Horizontal Form

Answer 4

您缺少表单组的父元素。试试这个 -

 <div class="form-horizontal" >
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
</div>

Answer 5

您需要删除＆＃34;行＆＃34;来自表格组的课程。行类基本上从div元素中删除填充。

<div class="form-group">
    <label class="col-2">Name:</label>
    <input class="form-control col-10" type="text" />
</div>

Bootstrap 4输入不会在填充处停止

5 个答案: