在Bootstrap 4中布局标签和值可以通过使用网格系统和CSS类来实现。以下是一种常见的布局方式:
<div class="container">
<div class="row">
<div class="col-md-4">
<label for="name">姓名:</label>
</div>
<div class="col-md-8">
<input type="text" id="name" name="name">
</div>
</div>
<div class="row">
<div class="col-md-4">
<label for="email">邮箱:</label>
</div>
<div class="col-md-8">
<input type="email" id="email" name="email">
</div>
</div>
</div>
在上面的示例中,使用了container
类来创建一个容器,并使用row
类来创建行。然后,使用col-md-4
和col-md-8
类将标签和值分别放置在不同的列中。这样可以实现一个简单的标签和值布局。
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label for="email">邮箱:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
在上面的示例中,使用了form-group
类来创建一个表单组。标签和值都直接放置在表单组中,通过CSS类form-control
来设置值的样式。这样可以实现一个简单的标签和值布局。
以上是在Bootstrap 4中布局标签和值的两种常见方式。具体的布局方式可以根据实际需求进行调整和扩展。
领取专属 10元无门槛券
手把手带您无忧上云