html - Bootstrap 中的中心输入字段

Question

这段代码显示了div左边的输入

<div class="col-sm-8 col-md-7" style="min-width: 270px;">
<input type="text" name="address" class="form-control" value="<?php echo$data["address"]; ?>">
</div>

我打算居中并对齐 div 并显示相同的内容。对不起英语。非常感谢。问候

Answer 1

如果我理解正确你想要什么，那么下面的内容应该居中输入字段:

<div class="col-sm-8 col-md-7" style="min-width: 270px;">
<input type="text" name="address" class="form-control" value="<?php echo$data["address"]; ?>" style="margin: auto;">
</div>

默认情况下，Bootstrap 的 .form-control 字段设置为 100% 宽度，因此您不会注意到任何差异。例如，您可以添加 width: 50%，然后您会看到它出现在中心。

更新后的答案:

看起来您需要将容器 div 而不是输入字段居中。您可以使用 col-md-offset-*这样做:

<div class="col-sm-8 col-md-7 col-md-offset-2" style="min-width: 270px;">
<input type="text" name="address" class="form-control" value="<?php echo$data["address"]; ?>">
</div>

由于 Bootstrap 的网格由 12 列组成，因此当您使用 col-md-7 时，它不会准确地居中。您需要使用 col-md-8 和 col-md-offset-2 使其恰好居中。