html - 如何在不破坏所有内容的情况下将导航栏设置为固定并在右侧设置菜单？

Question

我正在尝试制作此网页中的菜单：https ://socialyte.codeplus.it/wall.html

问题是，如果我的导航栏position: fixed全部损坏，我该如何解决？

这是我的 HTML：

<div class="container-fluid row p-0 m-0">
            <div class="col-2 bg-black sidebar">

            </div>
            <div class="col-10 p-0 m-0 body">
                <nav class="navbar navbar-dark inline">
                    <ul class="d-flex navbar-custom navbar-nav mr-auto d-inline">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Inicio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Perfil</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Publicar</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Cerrar Sesión</a>
                        </li>
                    </ul>
                </nav>
                <div class="col-md-10 offset-1">
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

这是我的 CSS：

.body {
  background-color: #EDF1F5;
  margin-left: 16.69%!important;
}

.sidebar {
  background: #ffffff;
  box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
  height: 100%;
  position: fixed;
  z-index: 1;
}

.navbar .navbar-custom{
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    width: 100%;
}

nav {
    background-color: #4F5467;
}

标签： htmlcssbootstrap-4

Answer 1

这可能会让你走上正轨。您仍然需要调整 body 和 sidebar 类的宽度。请注意，我添加了一个简单的 hello 只是为了在侧边栏中查看一些内容。* 编辑另外，将您的 nav 元素从带有 body 类的元素中取出。

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

这对你来说可能更容易玩。它正在使用引导程序。

.body {
  background-color: #EDF1F5;
  margin-left: 16.69%!important;
  margin-top: 65px;
}

.sidebar {
  background: #ffffff;
  box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
  height: 100%;
  position: fixed;
  z-index: 99;
}

.navbar .navbar-custom{
    min-height: 50px;
    background: #4F5467;
    font-size: 14px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9;
}

nav {
    background-color: #4F5467;
}

.card-container {
  margin-top: 180px;
}

<div class="container-fluid row p-0 m-0">
            <div class="col-2 bg-black sidebar">
              hello
            </div>
            <nav class="navbar navbar-dark inline">
                    <ul class="d-flex navbar-custom navbar-nav mr-auto d-inline">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Inicio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Perfil</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Publicar</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Cerrar Sesión</a>
                        </li>
                    </ul>
                </nav>
            <div class="col-10 p-0 m-0 body">
                
                <div class="col-md-10 offset-1 card-container">
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>