是否可以将col转换为导航栏？
我已经有了一个顶级导航栏。但是我希望下面的这个可以变成md和更低屏幕的导航栏。
<div class="row" id="bottomInfoRow">
<div class="col-md-4">
<ul class="list-inline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
答案 0 :(得分：2)
老实说，也许这就是你正在寻找的东西，但就功能而言它还不是很清楚，但它非常简单。
该示例将列与navbar-nav类结合使用，同时使用CSS调整包含所有内容的自定义navbar类。
（**大多数CSS一般用于更好的显示，不是必需的）
请参阅完整页面上的工作示例代码段。
.navbar.nav-lower {
background: #eee;
margin-top: -20px;
border-radius: 0;
border: none;
text-align: center;
}
.navbar.nav-lower .navbar-nav {
float: none;
}
.navbar.nav-lower .navbar-nav > li {
display: inline-block;
float: none;
margin: 0 -5px;
vertical-align: middle;
}
.navbar.nav-lower .navbar-toggle,
.navbar.nav-lower .navbar-toggle:hover,
.navbar.nav-lower .navbar-toggle:focus {
border: none;
background: none;
}
@media (min-width: 768px) {
.navbar.nav-lower {
background: none;
}
.navbar.nav-lower .navbrand-hidden {
display: none;
}
}
/**Use This rule to Display the Links as Block**/
/*@media (max-width: 767px) {
.navbar.nav-lower .navbar-nav > li {
display: block;
text-align: left;
width: 100%;
}
}*/<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-top" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-top">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<nav class="navbar navbar-default nav-lower">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-bottom" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><a class="navbar-brand navbrand-hidden" href="#">Collapse Nav</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-bottom">
<div class="row" id="bottomInfoRow">
<div class="col-sm-4">
<ul class="nav navbar-nav">
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="nav navbar-nav">
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="nav navbar-nav">
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
答案 1 :(得分：0)
没有。不可能将col作为导航。
但是，您可以在一个页面上拥有多个导航栏。这是一个例子：
<div class="wrap">
<div class="container-fluid nooverflow" role="main">
<div class="site-canvas row">
<div class="masthead">
<div class="row blue dfs-header">
<div class="col-xs-3">
<a class="navbar-brand" href="{!$Page.CP_COM_Home}" style="float:none;">
<i class="icon-ui" style="font-size:74px;position:relative;top:12px;"></i>
</a>
</div>
<div class="col-xs-6">
<div class="dfs-header-text">
<span>
Financial Services<sup>™</sup>
</span>
</div>
</div>
<div class="col-xs-3 col-md-offset-1 col-md-2">
<ul id="logged">
<li class="dropdown" id="logged-user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="icon-small-useraccount"> </i>
<apex:outputtext value="{!CustomerPortalUserName}"></apex:outputtext>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="{!$Site.Prefix}/secur/logout.jsp?retUrl=https://www.google.com">Logout</a>
</li>
<li>
<a href="#">User Option 2</a>
</li>
<li>
<a href="{!$Page.CP_COM_ChangeCurrentPassword}">Change Password</a>
</li>
</ul>
</li>
<li class="dropdown" id="logged-co">
<apex:form >
<apex:selectlist value="{!SelectedCCAN}" size="1">
<apex:actionsupport action="{!UpdateSelectedCompany}" event="onchange" />
<apex:selectoptions value="{!CustomerCCANS}" />
</apex:selectlist>
</apex:form>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="header-shim"></div>
</div>
</div>
<!-- Navigation under header-->
<div class="row blue">
<div class="col-md-offset-1 col-md-10">
<nav class="navbar">
<ul class="nav nav-pills nav-justified " id="nav-links">
<li>
<a href="{!$Page.CP_COM_ContractsList}">Contracts</a>
</li>
<li>
<a href="{!$Page.CP_COM_AssetDetails}">Asset Details</a>
</li>
<li>
<a href="{!$Page.CP_COM_ProductInformation}">Product Information</a>
</li>
<li>
<a href="{!$Page.CP_COM_MyDocuments}">My Documents</a>
</li>
<li>
<a href="{!$Page.CP_COM_MainCustomerCare}">Contact Customer Care</a>
</li>
<li>
<a href="{!$Page.CP_COM_Admin}">Admin</a>
</li>
</ul>
</nav>
</div>
</div>
不要对URLFOR或Apex标记感到困惑，因为它来自Saleforce应用程序。在这里，我们使用堆叠两个导航栏。您可以根据自己的喜好设计样式。它们不必位于同一行，列或容器中。用css控制定位。