Question

<div class="jumbotron text-center" id="jumbotron">
  <h1 class="display-3">Lorem Ipsum</h1>
  <p class="lead">Lorem ipsum</p>
  <hr class="my-y-2">
  <p>################</p>
  <form class="form-inline">

    <label class="sr-only" for="email">Email</label>
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-prepend">
        <div class="input-group-text">@</div>

        <input type="email" class="form-control" id="email" placeholder="Email">
      </div>

    </div>

    <button type="submit" class="btn btn-primary mb-2">Sign Up</button>
  </form>
</div>

我正在尝试将这种形式放在一个超大屏幕中并处于它的中心，但我似乎无法使其发挥作用。

Answer 1

您还没有发布任何CSS，因此很难理解您哪里出错了。但是，可以通过

包装表单来实现表单的居中

示例：JSFiddle.net

#form-align
  {
   display: block;
   text-align: center;
 }
form
  {
   display: inline-block;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}

Answer 2

在这种情况下，您需要的 Bootstrap 4 课程为justify-content-center。

这是工作代码：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="jumbotron text-center" id="jumbotron">
    <h1 class="display-3">Lorem Ipsum</h1>
    <p class="lead">Lorem ipsum</p>
    <hr class="my-y-2">
    <p>################</p>
    <form class="form-inline justify-content-center">

        <label class="sr-only" for="email">Email</label>
        <div class="input-group mb-2 mr-sm-2">
            <div class="input-group-prepend">
                <div class="input-group-text">@</div>

                <input type="email" class="form-control" id="email" placeholder="Email">
            </div>

        </div>

        <button type="submit" class="btn btn-primary mb-2">Sign Up</button>
    </form>
</div>

＆＃13;

如何将表格置于Bootstrap 4 jumbotron中

2 个答案: