- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我不明白如何用 Bootstrap 编写这个导航:
如您所见,它由左侧的品牌形象、一些空间以及应适合品牌长度和窗口宽度的两行组成。
我这样做了,但效果不佳。当我调整窗口大小时,导航有时会离开窗口。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default">
<div class="container-fluid" id="nav">
<div class="row">
<div class="navbar-header"> <a href="#"><img src="~/Images/logo.png" class="logo" width="308" height="130" alt="" style="float:left; margin-left:20px;margin-right:100px;"></a> </div>
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
最佳答案
让我们从 Default navbar 开始来自 Bootstrap 的文档。
<ul></ul>
但让它们更高。clear: left;
就够了。 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.navbar-brand {
display: block; /* 1. */
float: none;
height: auto;
margin: 0 !important; /* 2. */
padding: 0 20px 0 0;
}
@media (min-width: 768px) {
.navbar-nav>li>a { /* 3. */
line-height: 21px;
padding-top: 22px;
padding-bottom: 22px;
}
.clear-left { /* 4. */
clear: left;
}
}
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#"><img src="//placehold.it/308x130/c69/f9c/?text=Brand" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li class="clear-left"><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
关于html - Bootstrap 3,如何创建带有品牌形象和两行链接的导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40570097/
我整个早上都在为这件小事苦苦挣扎。我尝试使用 Bootstrap 3 将 .navbar-brand 置于整个导航栏的中间。 有人能解开我的谜团吗? 代码:
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: Reshape data from long to wide format R 和: day <- c(1, 1,
如何构建Dockerfile here? 我git clone并运行docker build .。然后我得到以下错误: Sending build context to Docker daemon
我使用 Logic 示例作为引用,将端口作为子级添加到矩形 Figure/EditPart/Model 中。端口 Figures 显示如预期,调试显示 EditParts 和 Models 已创建并添
我在下面给出了显示 9 个框 的代码,这些框的值类似于 digital time, 还有另一个类 box002 显示 digitscurrosponding to the randomly selec
我是一名优秀的程序员,十分优秀!