使用 Bootstrap 4 创建一个类似于 Bootstrap 3 中的表单的表单

Question

我想使用 BootStrap 4 创建一个表单，它看起来像 BootStrap 3 允许人们轻松创建的表单。即我想要一个在特定大小内右对齐的粗体标签（例如 col-sm-4），在它旁边我想要一个输入字段，其宽度由带有 col-sm- 类的封闭 div 标签控制4（例如）。我怎样才能做到这一点？我已经花了一个小时左右的时间与 .css 和 BS4 进行斗争来创建它，但无法达到我想要的效果。任何提示都会很棒。

下面的代码会产生我想要的效果，但不允许我有不同大小的输入（它们都默认为相同的大小）

css:

div.form-inline label.col-sm-3 {
justify-content: flex-end;
font-weight:650;
}

html:

<div class="form-inline">
<label for="INcity" class="col-form-label col-12 col-sm-3">City</label>
<div class="col-sm-4"><input type="text" name="INcity" class="required form-control" id="INcity"></div>
</div>

如果我改为使用 form-group，那么我可以使用封闭标签来更改输入字段的大小，但是 css（即使我将其更改为 .form-group 而不是 .form-inline）会失败正确对齐标签并将其设置为粗体。所以我想我正在寻找正确的 .css 或如何简单地实现整个效果的示例（就像 BS3 一样）。我一定遗漏了一些明显的东西，因为我无法相信 BS4 开发人员会在没有我必须做的任何 .css hack 等的情况下让实现与 BS3 相同的外观变得如此困难。虽然我确实注意到 BS4 文档中给出的每个示例都有左对齐标签，所以也许他们已经决定为每个 BS4 用户做出格式决定，但这似乎有点不太可能（而且不友好）。

Answer 1

为了使col-* 工作，它们必须位于.row 或.form-row 内。 不需要任何额外的 CSS：

https://codeply.com/go/0Vkxbmgb4c

<div class="form-row">
    <label for="INcity" class="col-form-label col-12 col-sm-3 font-weight-bold text-right">City</label>
    <div class="col-sm-4">
        <input type="text" name="INcity" class="required form-control" id="INcity">
    </div>
</div>

https://getbootstrap.com/docs/4.0/components/forms/#form-grid

Answer 2

如果您有几个要从 BS3 转换为 BS 4，那么 ZimSystem 建议作为答案的方式实施起来将非常令人厌烦 - 因为您必须更改每个实例。只需使用以下 .css 创建一些 css（看起来您实际上是在要求），然后使用 find 和 replace 将 control-label 的每个实例替换为 col-form-label。这种方法比上面建议的方法容易得多，并且使用了更加模块化的方法（因为您只需编写一次 css 标记 - 在我看来，模块化应该是每个程序员的方法）。确保在加载 BS4 css 之后加载此 css。

.col-form-label
{
    font-weight:600;
    text-align:right;
}