个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
26
4
我正在尝试使用列系统在 Bootstrap 中构建导航栏，但我遇到了一些问题，我不确定自己做错了什么。
我希望最终得到一个如下所示的导航栏:
我想要一行左对齐的列带有 Logo ，右对齐的列带有用户按钮，然后是第二行带有居中对齐的按钮。
我的想法是我可以创建两个类为“col-lg-6 col-md-6”的 div，一个用于 Logo ，一个用于用户按钮。这两个将创建第一个 12 列行，这将强制后面的标签进入一个全新的行。
但是，当我尝试这样做时，我最终发现所有内容都以内联方式运行且乱序。
我知道我可以通过添加我自己的自定义 css 来做到这一点(这是我能够模拟第一个屏幕截图的方式)，但我的偏好是坚持使用 Bootstrap 列系统，所以我的临时 css不会发生什么事。我还想了解我做错了什么(这是我第一个使用 bootstrap 的元素，所以我仍在努力克服学习曲线)。
这是我为这个演示页面编写的代码:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/additions.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="collapse navbar-collapse col-lg-6 col-md-6" >
<ul class="nav navbar-nav navbar-left">
<li><img src="images/genericLogo.png"><!-- <a href="#">MySite.com</a> --></li>
</ul>
</div>
<div class="collapse navbar-collapse navbar-right col-lg-6 col-md-6">
<div class="dropdown">
<button id="userMenu" class="btn dropdown-toggle btn-primary" type="button" data-toggle="dropdown">
<span>username@domainName.com </span><span class="caret userButton"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="userMenu">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">View Details</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Edit</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Logout</a></li>
</ul>
</div>
</div>
<div class="collapse navbar-collapse" id="mainNav">
<ul id="navlist" class="nav navbar-nav">
<li><a href="#">Reports</a></li>
<li><a href="#">Account Management</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Request a Quote</a></li>
<li><a href="#">MainSite.com</a></li>
</ul>
</div>
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#mainNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div class="container-fluid">
<h1>Test</h1>
<div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
<div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
<div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
<div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
<div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
<div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-6">testitem <br />testItem</div>
<div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-6">testitem <br />testItem</div>
<div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
<div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
<div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
<div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
<div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
额外的CSS
.demorow{
background-color:gray;
padding:10px;
border:1px solid black;
}
/* Centering Navbar items */
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
/*Adding padding to content for a fixed navbar*/
body {
padding-top: 110px;
}
/*Adding padding to content for a fixed navbar when nav items are collapsed*/
@media screen and (max-width: 768px) {
body { padding-top: 40px; }
}
/* Make dropdown menu items the same width as the dropdown wrapper*/
.dropdown{
width:100%;
}
.dropdown-menu{
width:100%;
}
/* left alight dropdown text*/
.dropdown-menu > li {
text-align:left;
}
如有任何帮助，我们将不胜感激。
最佳答案
你只需要添加以下 div 元素在以下行之前
<div class="collapse navbar-collapse" id="mainNav">
添加以下div元素
<div class="clearfix"></div>
所以最终代码看起来类似于:
<!-- SOME CODE -->
<div class="clearfix"></div>
<div class="collapse navbar-collapse" id="mainNav">
<!-- SOME CODE -->
关于css - Bootstrap : navbar column issues，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23596265/
26
4
0
这正确地呈现了标题，因为我可以看到一个列带有“Product ID”标题的表：。我正试图重构它，这样我就可以重用它，因为它们在整个应用程序中几乎是相同的：。在这种情况下，头不会呈现...检查页面元素中
我什至不知道如何表达这一点，但在 Python 中有没有一种方法可以引用等号之前的文本，而无需实际再次编写？ ** 编辑 - 我在 Jupyter 中使用 python3 我似乎用了半辈子的时间来写作
假设我有一个包含以下列的字典 dict_ = [ {'key1': 'value1', 'key2': 'value2', 'key3': 'value3', '
假设我有一个包含以下列的字典 dict_ = [ {'key1': 'value1', 'key2': 'value2', 'key3': 'value3', '
假设我的数据库中有一张地铁 map ，其中每条线路的每个站点都是一行。如果我想知道我的线路在哪里互连: mysql> SELECT LineA.stop_id FROM LineA, LineB WH
代码 select c1,c2,c3,c4,c5,c6 from table where c5 in ('a', 'b') 从这里开始，我想将 c5 列拆分为两列，然后根据它们对 c
我正在尝试搜索表格中的两列，即标题和描述。但我想先搜索标题，然后再搜索描述。所以匹配标题的所有行排在第一位，所有匹配描述的行排在第二位 我可以使用单个 SQL 查询来实现吗？ 最佳答案 您还可以使用
下面有以下 Python 数据框。 “标志”字段是我想要用代码创建的所需列。 我想要执行以下操作: 如果“分配类型”是预测的并且“Activities_Counter”大于 10，我想创建一个名为“F
我有两列，area 和 block，其中 area 是一个 int 类型，block 是一个 varchar。 现在我正在写两个查询: select * from table where area a
使用 Slick 2，我试图生成一个带有元组 IN 子句的查询: select * from my_table where (a, b) IN ((1, 87)); 给定: val seq: Seq[
我正在尝试从数据透视表中获取一组值，其中 A 列等于值数组，例如 ID 12 的 attribute_value_id 等于 3 和 9。这可以做到吗？我已经走了这么远... ID | post_id
我找不到这样做的有效方法。我在 Python 中有以下 DataFrame，列从 A 到 Z A B C ... Z 0 2.0 8.0 1.0 ... 5.0 1
我的数据框中有以下格式的数据: >>> df = pd.DataFrame(np.random.randn(6,4),index=dates,columns=list('ABCD')) >>> df
我有多个与我公司销售的产品相关的表被新产品取代，随着时间的推移，这导致了多个表的出现。 我一遍又一遍地使用以下查询，直到最终表中只剩下 2 个产品... CREATE TABLE mar15a
我有如下 2 个表:- 表A ------------------------------- | product_id | price | --------------------
我有一个名为 tbl_mainsheet7 的表，创建方式如下: pk_mainsheet client_id project_id mainsheet_id project_cat EA_
我得到了以下 HTML 结构: ... ... 我的 CSS: #main-container { width:80%; margin:20px auto;
对于我的以下要求，我无法获得解决方案。 如果 data.table(如下)在 Col1 和 Col3 中有匹配的值。替换 Col2 值(旧的 New-Val)。 Col1 Col2 Col3
我正在通过连接几个表来构建一个 View ，以通过 Entity Framework 提取数据。由于此 View 没有唯一列，EntityFramework 无法检索正确的结果集(即第一列重复)。 为
好的，我已经尝试了太久了，是时候寻求帮助了。我有一个看起来有点像这样的数据框: person fruit quantity all_fruits 0 p1 grapes 2
我是一名优秀的程序员,十分优秀！