Bootstrap Navbar固定在顶部，Container垂直居中

时间：2017-11-13 06:58:53

标签： html css twitter-bootstrap

我的页面非常简单：它由导航栏和两个面板组成。

我试图将导航栏固定在顶部，两个面板垂直居中（适用于任何屏幕尺寸或浏览器）。

将这两个面板放在一个容器中。

到目前为止，我没有成功地将容器垂直居中。

以下是我现在所拥有的：

enter image description here

这是我想要实现的目标：

enter image description here

这是我的代码：

＆＃13;
＆＃13; 
html {
  overflow: hidden;
  height: 100%;
}

body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.panel-default1 {
  padding-top: 8px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  height: 400px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}

.panel-default2 {
  padding-top: 10px;
  padding-right: -15px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  height: 400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
＆＃13; 
<body>

  <nav class="navbar transparent navbar-static-top">

    <div class="navbar-header">
      <p>Welcome</p>
    </div>

  </nav>

  <div class="container d-flex h-100">

    <div class="row justify-content-center align-self-center">

      <!-- 1st panel -->
      <div class="col-md-4 mb-4" id="panel">

        <div class="panel panel-default1">

          <div class="panel-body">

            <p>Blablabla</p>

          </div>
          <!-- panel body -->
        </div>
        <!-- panel-default1-->
      </div>
      <!-- col md 4 -->

      <!-- 2nd panel -->

      <div class="col-md-8 col-md-8" id="panel2">

        <div class="panel panel-default2">

          <div class="panel-body">

            <p>Blablabla</p>

          </div>
          <!-- panel-body -->

        </div>
        <!-- panel-default2-->

      </div>
      <!-- col md 8 -->

    </div>
    <!-- row -->

  </div>
  <!-- container-->

</body>
＆＃13;
＆＃13;
＆＃13;

从HTML中可以看出，我试图在容器和行上使用Bootstrap的flexbox，但没有成功。

除了导航栏外，请告知工作解决方案垂直居中我的容器。

3 个答案:

答案 0 :(得分：0)

根据我的注意，您希望元素居中，但不要使用所有12列，因此您可以使用mx-auto来居中一个少于12列的元素。你也说过

＆＃13;
＆＃13; 
.noMX {
  background-color: red;
}
.withMX {
  background-color: green;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="noMX col-8">awts</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="withMX col-8 mx-auto">awts</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

要将其垂直居中，您可以试试这个。首先将height: 100%添加到正文和html，因为我注意到您使用了h-100，这意味着您希望容器上有100％的高度。您还需要将面板包装到另一个div中，以便将居中的元素是div包装器而不是面板。我还删除了列中的md，以便您可以在较小的视口中显示结果

＆＃13;
＆＃13; 
html,
body {
  height: 100%;
}

.wrapper {
  background-color: Red;
}

#panel {
  background-color: blue;
}

#panel2 {
  background-color: green;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar transparent navbar-static-top">
  <div class="navbar-header">
    <p>Welcome</p>
  </div>
</nav>

<div class="wrapper container h-100">
  <div class="row d-flex align-items-center h-100">
    <div class="col-12">
      <div class="row">
        <div class="col-4 mb-4" id="panel">
          <div class="panel panel-default1">
            <div class="panel-body">
              <p>Blablabla</p>
            </div>
          </div>
        </div>
        <div class="col-8" id="panel2">
          <div class="panel panel-default2">
            <div class="panel-body">
              <p>Blablabla</p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您应该只能将col-4和col-8用于容器内row内的列 见here

请参阅example

编辑： 要将它们垂直对齐，您应该只能在一行中添加align-items-center类，而无需额外的css。 更新了示例

答案 2 :(得分：0)

试试这个

html {
  overflow: hidden;
  height: 100%;
}

body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.panel-default1 {
  padding-top: 8px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  height: 400px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  background:red;
}

.panel-default2 {
  padding-top: 10px;
  padding-right: -15px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  height: 400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  background:green;
}
.navbar-header{
    float: none;
    padding: 20px;
    background:black;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>

  <nav class="navbar transparent navbar-static-top text-center">

    <div class="navbar-header">
      <p>Welcome</p>
    </div>

  </nav>

  <div class="container">

    <div class="row">

      <!-- 1st panel -->
      <div class="col-md-4 mb-4" id="panel">

        <div class="panel panel-default1">

          <div class="panel-body">

            <p>Blablabla</p>

          </div>
          <!-- panel body -->
        </div>
        <!-- panel-default1-->
      </div>
      <!-- col md 4 -->

      <!-- 2nd panel -->

      <div class="col-md-8 col-md-8" id="panel2">

        <div class="panel panel-default2">

          <div class="panel-body">

            <p>Blablabla</p>

          </div>
          <!-- panel-body -->

        </div>
        <!-- panel-default2-->

      </div>
      <!-- col md 8 -->

    </div>
    <!-- row -->

  </div>
  <!-- container-->

</body>

相关问题
最新问题