要实现将Bootstrap col-md-4和form-group居中,并使它们保持内联,可以使用以下步骤:
<form>
<div class="form-group">
<label for="input1">Input 1</label>
<input type="text" class="form-control" id="input1">
</div>
<div class="form-group">
<label for="input2">Input 2</label>
<input type="text" class="form-control" id="input2">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="form-group">
<label for="input1">Input 1</label>
<input type="text" class="form-control" id="input1">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="input2">Input 2</label>
<input type="text" class="form-control" id="input2">
</div>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
在上述代码中,使用了容器(container)和行(row)来包装列(col-md-4)和表单组(form-group)。通过添加justify-content-center
类名,使行中的内容居中对齐。
<!DOCTYPE html>
<html>
<head>
<title>Centered Bootstrap Form</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<!-- 上述代码 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
这样,两个输入组和一个按钮就会在页面中居中显示,并保持内联。
领取专属 10元无门槛券
手把手带您无忧上云