我想使用BootStrap 4创建一个表单,它看起来像BootStrap 3允许轻松创建的表单。即我想在特定大小(例如col-sm-4)中右对齐的粗体标签,并且在它旁边我想要一个输入字段,其宽度由带有类似col-sm-的类的封闭div标签控制4(作为例子)。我怎样才能做到这一点?我花了一个小时左右的时间与.css和BS4进行斗争来创造这个,但却无法达到我想要的效果。任何提示都会很棒。
下面的代码会产生我想要的效果但不允许我有不同大小的输入(它们都默认为相同的大小)
的CSS:
<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>
HTML:
<maven.compiler.source>1.7</maven.compiler.source>
<maven.compiler.target>1.7</maven.compiler.target>
如果我改为使用form-group,那么我可以使用封闭标记来改变输入字段的大小,但是css(即使我将其更改为.form-group而不是.form-inline)也会失败正确对齐标签并将其设置为粗体。所以我想我正在寻找正确的.css或者如何简单地实现整个效果的例子(就像BS3一样)。我必须错过一些明显的东西,因为我无法相信BS4开发人员会如此难以实现与BS3允许的相同外观,而不需要任何.css黑客等。虽然我注意到BS4文档中给出的每个示例都有左对齐的标签,所以他们可能决定为每个BS4用户做出格式化决定,但这似乎不太可能(并且不友好)。
答案 0 :(得分:2)
为了使col-*
能够工作,它们必须位于.row
或.form-row
内。
不需要任何额外的CSS:
https://www.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
答案 1 :(得分:2)
如果你有几个从BS3转换到BS 4,那么ZimSystem建议作为答案的方式将非常无聊 - 因为你将不得不改变它的每一个实例。只需使用以下.css创建一些css(因为它看起来你实际上要求)并使用find和replace来用col-form-label替换control-label的每个实例。这种方法比上面提到的方法容易得多,并且使用更模块化的方法(因为你只需要编写一次css标记 - 模块化应该是我认为的每个程序员的方法)。确保在BS4 css加载后加载此css。
.col-form-label
{
font-weight:600;
text-align:right;
}