即使更改屏幕大小,也要在页面中心保留navtab

时间:2018-05-03 10:18:41

标签: html css twitter-bootstrap

如何在浏览器窗口调整大小时将此navtabs中心设置为屏幕?当我改变浏览器窗口的大小时,我需要在中心的这些选项卡并保持在中心。

任何人都可以帮我这么做吗?

代码:

<div class="row">
<div class="col-md-offset-4 col-sm-4">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#admin_login_form"><strong>Admin</strong></a></li>
    <li><a data-toggle="tab" href="#librarian_login_form"><strong>Librarian</strong></a></li>
  </ul>
  <div class="tab-content">
    <div id="admin_login_form" class="tab-pane fade in active">
      <form>
        <div class="form-group">
          <input type="text" class="form-control" id="adminUserName" placeholder="UserName"/>
        </div>
        <div class="form-group">
          <input type="password" class="form-control" id="adminPassword" placeholder="Password"/>
        </div>
        <div class="form-group">
          <button type="button" class="btn btn-lg " id="admin-login">Log In</button>
        </div>
      </form>
    </div>

    <div id="librarian_login_form" class="tab-pane fade">
      <form>
        <div class="form-group">
          <input type="text" class="form-control" id="librarianEmail" placeholder="Email"/>
        </div>
        <div class="form-group">
          <input type="password" class="form-control" id="librarianPassword" placeholder="Password"/>
        </div>
        <div class="form-group">
          <button type="button" class="btn btn-lg" id="librarian-login">Log In</button>
        </div>

      </form>
    </div>
  </div>

</div>

1 个答案:

答案 0 :(得分:0)

我希望它会对你有所帮助。

自举-3

.center {
   margin: auto;
   text-align: center;
}

自举-4

<div class="d-flex justify-content-center align-items-center">
   // for vertical-center: align-items-center
   // for horizontal-center: justify-content-center
   <ul></ul>
</div>