简单设计：Boostrap

Question

我对设计一点都不好，我只是想在Bootstrap 4中进行简单的表单对齐;我根本不做任何习惯，只是乐意接受框架给我的任何东西。

我已经阅读了表单文档，并且变体的数量非常混乱，到目前为止，我尝试的所有内容都以某种方式失败了。

我有一个包含多行的表单，每行包含三个元素：一个标签;应该有大小= 60的文本字段（虽然我猜这可能只是一个近似值）;和一个选择列表。就是这样。我不希望这些元素之间有任何额外的空间，因此使用网格系统似乎不是正确的解决方案。

我想出的最接近的是：

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="form-group row">
    <div class="col-auto col-form-label"><label for="dishes-0-dish">Dish</label></div>
    <div class="col-auto">
        <input class="form-control" id="dishes-0-dish" name="dishes-0-dish" size="60" type="text" value="">
    </div>
    <div class="col-auto">
        <select id="dishes-0-type" name="dishes-0-type"><option value="13">Cheese</option><option value="6">Dessert</option><option value="3">Fish</option><option value="12">Meat</option></select>
    </div>
</div>

[the above is repeated five times, with different index numbers]

<div>
    <input class="btn" value="Add" name="choice" type="submit" />
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

但是，标签看起来太高，与文本字段的顶部对齐，并且看起来延伸得太低（如果我添加另一个类以使标签出现在不同颜色的背景上）。类似地，选择框也与文本字段的顶部对齐，并且仅占用文本字段的垂直空间的一半。并且＆＃34;添加＆＃34;按钮不与任何东西对齐。

我该如何正确设计呢？感谢。

编辑：这在Chrome浏览器中的显示方式是

显示差的垂直对齐方式和未对齐的提交按钮。我无法真实地展示我做想要的东西的形象，因为我不是设计师;再一次，我对一些没有任何明显缺陷的通用设计感到高兴，就像这个一样。

再次修改：建议使用form-control，修复了select和enter按钮的对齐方式（谢谢！），文本上使用col代替col-auto并选择字段。但是，现在选择字段太长了。

如果我将col-auto放在select上，那么它是一个合理的大小，但是textfield是巨大的（不是我指定的60）。回到col-auto两者都是合理的，我可能会留在这里。

对于这两者，除了黄色背景和一些通用字体外，我还退出了其他CSS;没有其他任何与对齐相关的东西。现在这个标签看起来很沉闷;是不是Bootstrap中的通用标签有这么小的样式？无论如何，我认为大多数问题都已解决;谢谢你的帮助！

Answer 1

如果您在标签上使用col-auto，它会使列符合标签大小，如果您只有col用于其他两个输入，那么它们将在同一尺寸上均匀调整大小线。我还取消了自动应用于标签的margin-bottom，并添加了vertical-align:middle;以将其与其他输入对齐。

label{
  margin-bottom:0;
  vertical-align:middle;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="form-group row">
    <div class="col-auto col-form-label"><label for="dishes-0-dish">Dish</label></div>
    <div class="col">
        <input class="form-control" id="dishes-0-dish" name="dishes-0-dish" size="60" type="text" value="">
    </div>
    <div class="col">
        <select id="dishes-0-type" name="dishes-0-type" class="form-control"><option value="13">Cheese</option><option value="6">Dessert</option><option value="3">Fish</option><option value="12">Meat</option></select>
    </div>
</div>

[the above is repeated five times, with different index numbers]

<div>
    <input class="btn" value="Add" name="choice" type="submit" />
</div>
</div>