在 Angular JS 中使用 Bootstrap 6 和 ui-Router 浮动答案

【问题标题】：floating with Bootstrap 6 and ui-Router in angular JS在 Angular JS 中使用 Bootstrap 6 和 ui-Router 浮动
【发布时间】：2015-07-13 02:26:32
【问题描述】：

我正在使用 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;
    }

【问题讨论】：

能否请您创建一个 plunkr /jsfiddle 以帮助其他人参与解决您的问题。
当然，但有点菜鸟所以不确定

标签： html css angularjs twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

尝试将此类添加到您的 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;
}

【讨论】：

嗨湿婆 - 谢谢你 - 它有效，但我想知道为什么清理不起作用 - 哦，好吧 - 没问题
不确定为什么清除不起作用，当我将导航栏设为浮动时，我会为我的应用程序执行此操作

【解决方案2】：

如果您希望 sidenav 占据整个侧面而没有任何边距，则对其应用较高的 z-index 值。它将漂浮在包括导航栏在内的所有内容之上。

【讨论】：