在 angular JS 中使用 Bootstrap 6 和 ui-Router 浮动

Question

我正在使用 ui-Router 将内容渲染到 index.html 模板中，其中包含站点导航栏。

但是，内容呈现在导航栏下方，所以我看不到它，即它没有清除导航栏。我尝试将 clear:both; 添加到 .navbar 和 .navbar-custom 类，但这不起作用。

任何人都可以提出任何建议吗？

这里是相关的index.html

<body id="page-top" data-spy="scroll" data-target=".navbar-custom" ng-controller="formController">
    <!-- Preloader -->
    <div id="preloader">
      <div id="load"></div>
    </div>

    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation" ng-controller="NavCtrl">
        <div class="container">

          <!--The navbar content goes in here-->
        </div>
        <!-- /.container -->
    </nav>

  <div ui-view></div>

</body>

<div class="container-fluid">
    <div class="row">
       <div class="col-md-3 col-lg-3">

                <h2> Admin Panel</h2>

                <p> Here is where we can view all of the appointments</p>

                Search: <input class="form-control" type="text" ng-model="query">
                Sort by:
                <select class="form-control" ng-model="orderProp">
                  <option value="name">Alphabetical</option>
                  <option value="recent">Most Recent</option>
                </select>
                <br>
                <p> <button class="btn btn-danger"  ng-click="open()"> Add A Job</button>
                <button class="btn btn-warning"  ng-click="openStaffDialog()"> Add A new Staff member</button>
                </p>

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

和css

.navbar {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);

}

.navbar-custom ul.nav li a {
    font-size: 12px;
    letter-spacing: 1px;
    color: #444;
    text-transform: uppercase;
    font-weight: 700;
}

.navbar-custom.top-nav-collapse ul.nav li a {
        -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    color: #fff;
}

.navbar-custom ul.nav ul.dropdown-menu {
      border-radius: 0; 
}

.navbar-custom ul.nav ul.dropdown-menu li {
    border-bottom: 1px solid #f5f5f5;

}

.navbar-custom ul.nav ul.dropdown-menu li:last-child{
    border-bottom: none;
}

.navbar-custom ul.nav ul.dropdown-menu li a {
    padding: 10px 20px;
}

.navbar-custom ul.nav ul.dropdown-menu li a:hover {
    background: #fefefe;
}

.navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a {
    color: #666;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}

.navbar.navbar-custom.navbar-fixed-top {
        margin-bottom: 30px;
    }

Answer 1

尝试将此 class 添加到您的 container-fluid div 并调整 margin-top: 50px；根据您的要求。

<div class="container-fluid view-container">

.view-container {
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 50px;
    margin-bottom: 10px;
}

Answer 2

如果你想让sidenav占据整个边，没有任何边距，那么给它应用一个高z-index值。它会浮在包括导航栏在内的所有内容之上。

在 angular JS 中使用 Bootstrap 6 和 ui-Router 浮动

floating with Bootstrap 6 and ui-Router in angular JS

html

css

twitter-bootstrap

angularjs

twitter-bootstrap-3