Question

我有一个bootstraap表单，其中两个字段我添加了类.d-inline-block，以便它彼此相邻，我有另一个字段，我没有添加类，所以它来自两个字段的下面

我希望这是我无法做到的div的中心。只有前两个字段是中心而不是最后一个div。

有人可以指出错误吗？

＆＃13;

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );

.d-inline-block {
  
  width: 40%;
}

.message {
  width: 80%;
}

.formClass {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

＆＃13;

<form class="formClass ">
  <div class="form-group d-inline-block">
    <input type="text" class="form-control" id="nameInput">
    <div class="form-control-placeholder"> Name </div>
  </div>
  <div class="form-group d-inline-block">
    <input type="text" class="form-control" id="phoneInput">
    <div class="form-control-placeholder"> Phone </div>
  </div>

  <div class="form-group message">
    <input type="text" class="form-control" id="phoneInput">
    <div class="form-control-placeholder"> Phone </div>
  </div>
</form>

＆＃13;

https://jsfiddle.net/97avbgsq/

Answer 1

将类添加到第三个DIV并提供display: inline-block;：

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );

.d-inline-block {
  
  width: 40%;
}

.message {
  width: 80%;
}

.formClass {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
.x {
  display: inline-block;
}

<form class="formClass ">
  <div class="form-group d-inline-block">
    <input type="text" class="form-control" id="nameInput">
    <div class="form-control-placeholder"> Name </div>
  </div>
  <div class="form-group d-inline-block">
    <input type="text" class="form-control" id="phoneInput">
    <div class="form-control-placeholder"> Phone </div>
  </div>

  <div class="form-group message x">
    <input type="text" class="form-control" id="phoneInput">
    <div class="form-control-placeholder"> Phone </div>
  </div>
</form>

https://jsfiddle.net/tyuxpzk9/1/

Answer 2

虽然您可以自由创建自己的自定义CSS类来控制表单字段大小和位置，但我建议使用内置的网格系统列类来控制输入字段的大小和位置。

Bootstrap 4 Grid System

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');

<form>

  <div class="row">
    <div class="form-group col-sm-4 offset-sm-2">
      <input type="text" class="form-control" id="nameInput">
      <label class="d-block text-center" for="nameInput">Name</label>
    </div>
    <div class="form-group col-sm-4">
      <input type="text" class="form-control" id="phoneInput">
      <label class="d-block text-center" for="phoneInput">Phone</label>
    </div>
  </div>
  
  <div class="row">
    <div class="form-group col-sm-8 offset-sm-2">
      <input type="text" class="form-control" id="phoneInput">
      <label class="d-block text-center" for="phoneInput">Phone</label>
    </div>
  </div>
  
</form>

Answer 3

使用bootstrap 4，您可以在父级上使用帮助程序类class CaseStatus < ActiveRecord::Base # all other code removed for brevity around_save :catch_previous_changes, on: :update def catch_previous_changes # see what attributes changed yield if persisted? # maybe do so other stuff if everything is ok end end end。

＆＃13;

.d-flex .flex-wrap .justify-content-center

＆＃13;

.d-inline-block {
  width: 40%;
}

.message {
  width: 80%;
}

.formClass {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

＆＃13;

但是，如果您想使用原始代码，要使用<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <form class="formClass d-flex flex-wrap justify-content-center"> <div class="form-group d-inline-block"> <input type="text" class="form-control" id="nameInput"> <div class="form-control-placeholder"> Name </div> </div> <div class="form-group d-inline-block"> <input type="text" class="form-control" id="phoneInput"> <div class="form-control-placeholder"> Phone </div> </div> <div class="form-group message"> <input type="text" class="form-control" id="phoneInput"> <div class="form-control-placeholder"> Phone </div> </div> </form>将块元素水平居中，请使用width或margin-left: auto; margin-right: auto，如果适合您的话。您也可以使用margin: auto bootstrap帮助程序类来完成此操作。

＆＃13;

.mx-auto

＆＃13;

.d-inline-block {
  width: 40%;
}

.message {
  width: 80%;
}

.formClass {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

＆＃13;

Bootstrap表单不在div的中心

3 个答案: