表单不在引导程序中居中

【问题标题】：form is not centering in bootstrap表单不在引导程序中居中
【发布时间】：2019-08-03 06:26:56
【问题描述】：

我使用的是纯Bootstrap，我面临的问题是我的form 不适合页面中心，我希望它位于页面中心。

我在这个项目中使用 laravel，所以有一些 laravel blade 语法。

我在welcome.blade.php中有以下代码

侧边栏在welcome.blade.php

<div class="sidebar" data-color="orange">
  <!--
    Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red | yellow"
-->
  <div class="logo">
    <a href="http://www.creative-tim.com" class="simple-text logo-mini">
      CT
    </a>
    <a href="http://www.creative-tim.com" class="simple-text logo-normal">
      Creative Tim
    </a>
  </div>
  <div class="sidebar-wrapper" id="sidebar-wrapper">
    <ul class="nav">
      <li class="active ">
        <a href="./dashboard.html">
          <i class="now-ui-icons design_app"></i>
          <p>Measurement</p>
        </a>
      </li>
      <li>
        <a href="./icons.html">
          <i class="now-ui-icons education_atom"></i>
          <p>Icons</p>
        </a>
      </li>
      <li>
        <a href="./map.html">
          <i class="now-ui-icons location_map-big"></i>
          <p>Maps</p>
        </a>
      </li>
      <li>
        <a href="./notifications.html">
          <i class="now-ui-icons ui-1_bell-53"></i>
          <p>Notifications</p>
        </a>
      </li>
      <li>
        <a href="./user.html">
          <i class="now-ui-icons users_single-02"></i>
          <p>User Profile</p>
        </a>
      </li>
      <li>
        <a href="./tables.html">
          <i class="now-ui-icons design_bullet-list-67"></i>
          <p>Table List</p>
        </a>
      </li>
      <li>
        <a href="./typography.html">
          <i class="now-ui-icons text_caps-small"></i>
          <p>Typography</p>
        </a>
      </li>
      <li class="active-pro">
        <a href="./upgrade.html">
          <i class="now-ui-icons arrows-1_cloud-download-93"></i>
          <p>Upgrade to PRO</p>
        </a>
      </li>
    </ul>
  </div>
</div>


  <div class="container">
    @yield('signup')
  </div>

这是 Bootstrap 表单，我从 Bootstrap 站点复制并注入到 welcome.blade.php。

@section('signup')

    <div class="row">

        <div class="col-md-6 col-md-offset-3">
         <form>
              <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>



@endsection

问题是表单将behind 放在侧边栏，尽管我使用.col-md-6 和.col-md-offset-3 将其置于页面中心。

为什么会有这种行为？

请帮忙，提前谢谢

【问题讨论】：

• 你应该添加 mx-auto
• 我应该在哪里添加？ @Ranjithv
• @Ranjithv 请您将其添加为答案而不是评论:)
• 酷！这是工作