Question

我的表单不在我的页面中心。请参阅下面的html文件和输出。我如何集中观察？

这是我的html：

<div class="container">
<div class='row justify-content-center'>
    <div class='col'>
    <p></p>

        <h1>Member Details: </h1>
            <p>Name: JP</p>
            <p>Surname: Roux</p>
            <p>ID Nr: 7604195133089</p>
            <p>Mobile Nr: 0741115552</p>
            <p>Email: jp@test.com</p>
            <p>D.O.B: 1976-04-19</p>
            <p>Language: Afrikaans</p> 
            <p>Interests:
                <ul>
                    <li>Tennis</li>
                    <li>Squash</li>
                </ul>
            </p>
            <p>Created At: 2018-06-06 09:31:31</p>
        <div class="page-header">
        <a href="http://tomcrud.test:8080/members/14/edit" class="btn btn-info">Edit</a>
        </div>
    </div>
</div>

Answer 1

您可以将表单放在下面：

<div class="container">
  <div class='row justify-content-center'>
    <div class='col-6 border border-primary'>
      <form action="/action_page.php">
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br> Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
      </form>
    </div>
  </div>
</div>

jsfiddle

Answer 2

切勿将 justify-content-center 用于该行。如果您想对齐列的中心内容，请对d-flex使用 justify-content-center 和 column 并将其内容包装为 w-auto div。

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class='row'>
    <div class='col d-flex justify-content-center'>
      <div class="w-auto">
        <p></p>

        <h1>Member Details: </h1>
        <p>Name: JP</p>
        <p>Surname: Roux</p>
        <p>ID Nr: 7604195133089</p>
        <p>Mobile Nr: 0741115552</p>
        <p>Email: jp@test.com</p>
        <p>D.O.B: 1976-04-19</p>
        <p>Language: Afrikaans</p> 
        <p>Interests:
        <ul>
          <li>Tennis</li>
          <li>Squash</li>
        </ul>
        </p>
      <p>Created At: 2018-06-06 09:31:31</p>
      <div class="page-header">
        <a href="http://tomcrud.test:8080/members/14/edit" class="btn btn-info">Edit</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

https://codepen.io/anon/pen/eKBNKY

中心表格

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class='row'>
    <div class='col d-flex justify-content-center'>
      <form class="w-auto">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>

＆＃13;

https://codepen.io/anon/pen/rKWVqV

使用w-auto是不必要的。如果您愿意，可以省略。

Bootstrap Container Centering

2 个答案: