CSS Bootstrap:如何排列项目?

竖琴1814

我想排列标签和输入标签。

<div class="form-group row">
   <label class="form-control-label" 
    for="field_hasSernum">Has Sernum</label>
   <input type="checkbox" class="form-control" name="hasSernum" id="field_hasSernum"/>
</div>

但“输入”位于“标签”标签下

罗伯特

如果您查看 Bootstrap 的表单布局文档,他们建议合并他们的网格系统以水平方式对齐标签/输入:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="form-group form-row">
  <label class="form-control-label col-2" for="field_hasSernum">Has Sernum</label>
  <div class="col-10">
    <input type="checkbox" class="form-control" name="hasSernum" id="field_hasSernum"/>
  </div>
</div>

真的就是这么简单!您可以利用 Bootstrap 的所有网格系统来更好地微调不同设备尺寸的显示,以不同的方式对齐事物等。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS:排列浮动元素

来自分类Dev

如何使用CSS在水平行中排列图像?

来自分类Dev

如何创建和管理大型CSS项目?

来自分类Dev

CSS flexbox:如何使列项目填充高度

来自分类Dev

如何在css中水平均匀地排列孩子

来自分类Dev

在ionic2中按行和列排列项目

来自分类Dev

Bootstrap / CSS Div搞乱CSS

来自分类Dev

如何在Unity 2D面板中重新排列项目?

来自分类Dev

如何使用CSS网格重叠项目?

来自分类Dev

重新排列项目后为何不重建我的清单

来自分类Dev

如何覆盖<a>元素的Bootstrap CSS?

来自分类Dev

PYTHON>在.csv文件中重新排列项目数据(“日期”)

来自分类Dev

试图在tableview单元格中排列项目,并且它们不断跳跃

来自分类Dev

如何在代码中从ListView检索列项目

来自分类Dev

如何在Unity 2D面板中重新排列项目?

来自分类Dev

使用CSS排列广播项目

来自分类Dev

R重新排列数据框:将一些列项目放在列表中

来自分类Dev

如何使用CSS在水平行中排列图像?

来自分类Dev

根据订单随机排列项目

来自分类Dev

如何在列表框中排列项目?

来自分类Dev

Div排列HTML / CSS

来自分类Dev

在面板中排列项目

来自分类Dev

我应该如何在新的Yeoman项目中更改Bootstrap CSS属性?

来自分类Dev

使用Bootstrap和CSS对齐项目

来自分类Dev

如何在css中水平均匀地排列孩子

来自分类Dev

CSS display inline block如何防止重新排列?

来自分类Dev

如何使用 CSS/Bootstrap 网格系统水平排列两个 .rows?

来自分类Dev

通过 css 排列图像

来自分类Dev

在 WPF 中排列项目