Question

在我的两个div中，我使用form-control和form-control-lg，并且希望输入居中。问题是输入向左对齐。只有当我退出form-control类时，它才会居中（只剩下form-control-lg）。但这显然取消了格式化。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<div class="text-center border border-primary">
  <input type="text" class="form-control form-control-lg w-75">
</div>

<br>

<div class="text-center border border-primary">
  <input type="text" class="form-control-lg w-75">
</div>

Answer 1

在阅读了下一份文档后：Boostrap 4 - Justify Content。

我发现您必须结合使用 d-flex 和 justify-content-center 来使容器内的内容居中。表单还有一个替代d-flex的类，称为 form-inline 。我为您提供了两个选项的示例，但在这种情况下，我建议使用选项2 。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<h4 class="text-bold text-primary">Option 1</h4>
<div class="d-flex justify-content-center border border-primary">
    <input type="text" class="form-control form-control-lg w-75" value="Center using d-flex and justify-content-center"/>
</div>

<br>

<h4 class="text-bold text-primary">Option 2</h4>
<div class="form-inline justify-content-center border border-primary">
    <input type="text" class="form-control form-control-lg w-75" value="Center using form-inline and justify-content-center"/>
</div>

<br>

<h4 class="text-bold text-primary">Option 3 (BAD ONE)</h4>
<div class="text-center border border-primary">
  <input type="text" class="form-control-lg w-75" value="Center removing class form-control"/>
</div>

Bootstrap表单控制类可防止输入居中

1 个答案: