我正在使用我网站上的默认导航栏。我左边有4个li导航链接,右边有4个li。
我遇到的问题是当我调整窗口大小时,右侧导航链接会在折叠之前被推到左侧导航链接下。
我希望在将其推到左侧菜单链接下方之前将其折叠。
有谁知道我怎么能做到这一点?
任何帮助都会非常感激!
谢谢!
<nav class='navbar navbar-default navbar-static-top' role='navigation'>
<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-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 href="http://localhost/Freelance/home/index?testing=true"><img src="http://localhost/logo.png" alt="" /></a>
</div><div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'><ul class='nav navbar-nav navbar-left'><li><a href="http://localhost/Freelance/client/projects/index">View All Projects</a></li><li><a href="http://localhost/Freelance/messages/messagetpl/managetpl/index">Message Templates</a></li><li><a href="http://localhost/Freelance/client/projects/index?section=manage_hired_freelancers">Manage Hired Freelancers</a></li></ul>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class='nav navbar-nav navbar-right'><li><a href="http://localhost/Freelance/projcollab/hiredprojects/index">Project Collaboration</a></li><li><a href="http://localhost/Freelance/messages/allmessages/index?m=ufn256HeKFHL1VQ6wWxPB242CiMlMuvjgu%2Fct%2BpjJab0FVxFSh4G8YDwX3Uc7dKxNTCSbxTQgt%2F%2FOCOzvSxXKHWrTwYZTO0KLY3rgyUwwKdJYt9SONqios2Ax5XwAVJh">Inbox</a></li><li><a href="http://localhost/Freelance/#">Contact Us</a></li>
<li><li class='dropdown'>
<a class='dropdown-toggle' aria-expanded='false' aria-haspopup='true' role='button' data-toggle='dropdown' href='#'> json2021@gmail.com
<span class='caret'></span> </a>
<ul class='dropdown-menu'>
<li><a href="http://localhost/Freelance/#">Account Settings</a></li>
<li><a href="http://localhost/Freelance/#">Financial Summary</a></li>
<li><a href="http://localhost/Freelance/#">Contact us</a></li>
<li><a href="http://localhost/Freelance/#">Log out</a></li>
</ul>
</li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
答案 0 :(得分:0)
根据您提供的代码,您错过了(我认为)def parse(self, response):
sites = response.xpath('//div[contains(@class,"store_pricetable")]')
items = []
for site in sites:
item = mspItem()
item['model_name'] = response.xpath('//h2[contains(@class,"priceindia")]/text()').extract()
item['price'] = site.xpath('.//div[@class="store_price"]/text()').extract()
items.append(item)
return items
类的结束</div>
标记以及结束container-fluid
标记(除非您故意没有&#39;}添加这些?)
此外,您的HTML中也会显示此问题,这会导致显示问题:
</nav>
然后在底部你关闭它:
<li>
<li class='dropdown'>
<a class='dropdown-toggle'....
您似乎只需要删除额外的 </ul>
</li>
</li>
和<li>
。希望有所帮助。
答案 1 :(得分:0)
最终问题是链接的标题太长,以至于当视口减少时,给定的空间根本无法容纳它们。
如果您查看我发布的示例,则会显示原始navbar
,其中一个字体大小严重(不受欢迎,仅用于说明我的观点),另一个使用图标帮助解决问题。如果你将它打开成整页并开始减少它,你就会明白我的意思。
可能的解决方法:
@media (min-width: 768px) {
#test .navbar-nav li a {
font-size: 8px;
}
}
.divider {
margin: 75px 0;
border-bottom: 4px solid #f00;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class='navbar navbar-default navbar-static-top' role='navigation'>
<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-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 href="http://localhost/Freelance/home/index?testing=true">
<img src="http://placehold.it/50x50/f00" alt="" />
</a>
</div>
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav navbar-left'>
<li><a href="http://localhost/Freelance/client/projects/index">View All Projects</a>
</li>
<li><a href="http://localhost/Freelance/messages/messagetpl/managetpl/index">Message Templates</a>
</li>
<li><a href="http://localhost/Freelance/client/projects/index?section=manage_hired_freelancers">Manage Hired Freelancers</a>
</li>
</ul>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class='nav navbar-nav navbar-right'>
<li><a href="http://localhost/Freelance/projcollab/hiredprojects/index">Project Collaboration</a>
</li>
<li><a href="http://localhost/Freelance/messages/allmessages/index?m=ufn256HeKFHL1VQ6wWxPB242CiMlMuvjgu%2Fct%2BpjJab0FVxFSh4G8YDwX3Uc7dKxNTCSbxTQgt%2F%2FOCOzvSxXKHWrTwYZTO0KLY3rgyUwwKdJYt9SONqios2Ax5XwAVJh">Inbox</a>
</li>
<li><a href="http://localhost/Freelance/#">Contact Us</a>
</li>
<li>
<li class='dropdown'> <a class='dropdown-toggle' aria-expanded='false' aria-haspopup='true' role='button' data-toggle='dropdown' href='#'> json2021@gmail.com
<span class='caret'></span> </a>
<ul class='dropdown-menu'>
<li><a href="http://localhost/Freelance/#">Account Settings</a>
</li>
<li><a href="http://localhost/Freelance/#">Financial Summary</a>
</li>
<li><a href="http://localhost/Freelance/#">Contact us</a>
</li>
<li><a href="http://localhost/Freelance/#">Log out</a>
</li>
</ul>
</li>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="divider"></div>
<nav class='navbar navbar-default navbar-static-top' role='navigation'>
<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-example-navbar-collapse-2' 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 href="http://localhost/Freelance/home/index?testing=true">
<img src="http://placehold.it/50x50/266080" alt="" />
</a>
</div>
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-2'>
<ul class='nav navbar-nav navbar-left'>
<li><a href="http://localhost/Freelance/client/projects/index">View All Projects</a>
</li>
<li><a href="http://localhost/Freelance/messages/messagetpl/managetpl/index">Message Templates</a>
</li>
<li><a href="http://localhost/Freelance/client/projects/index?section=manage_hired_freelancers">Manage Hired Freelancers</a>
</li>
</ul>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class='nav navbar-nav navbar-right'>
<li><a href="http://localhost/Freelance/projcollab/hiredprojects/index"><i class="fa fa-users"></i></a>
</li>
<li><a href="http://localhost/Freelance/messages/allmessages/index?m=ufn256HeKFHL1VQ6wWxPB242CiMlMuvjgu%2Fct%2BpjJab0FVxFSh4G8YDwX3Uc7dKxNTCSbxTQgt%2F%2FOCOzvSxXKHWrTwYZTO0KLY3rgyUwwKdJYt9SONqios2Ax5XwAVJh"><i class="fa fa-paper-plane"></i></a>
</li>
<li><a href="http://localhost/Freelance/#"><i class="fa fa-map-marker"></i></a>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' aria-expanded='false' aria-haspopup='true' role='button' data-toggle='dropdown' href='#'> <i class="fa fa-user"></i>
<span class='caret'></span>
</a>
<ul class='dropdown-menu'>
<li><a href="http://localhost/Freelance/#">Account Settings</a>
</li>
<li><a href="http://localhost/Freelance/#">Financial Summary</a>
</li>
<li><a href="http://localhost/Freelance/#">Contact us</a>
</li>
<li><a href="http://localhost/Freelance/#">Log out</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="divider"></div>
<nav class='navbar navbar-default navbar-static-top' id="test" role='navigation'>
<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-example-navbar-collapse-3' 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 href="http://localhost/Freelance/home/index?testing=true">
<img src="http://placehold.it/50x50/000" alt="" />
</a>
</div>
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-3'>
<ul class='nav navbar-nav navbar-left'>
<li><a href="http://localhost/Freelance/client/projects/index">View All Projects</a>
</li>
<li><a href="http://localhost/Freelance/messages/messagetpl/managetpl/index">Message Templates</a>
</li>
<li><a href="http://localhost/Freelance/client/projects/index?section=manage_hired_freelancers">Manage Hired Freelancers</a>
</li>
</ul>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class='nav navbar-nav navbar-right'>
<li><a href="http://localhost/Freelance/projcollab/hiredprojects/index">Project Collaboration</a>
</li>
<li><a href="http://localhost/Freelance/messages/allmessages/index?m=ufn256HeKFHL1VQ6wWxPB242CiMlMuvjgu%2Fct%2BpjJab0FVxFSh4G8YDwX3Uc7dKxNTCSbxTQgt%2F%2FOCOzvSxXKHWrTwYZTO0KLY3rgyUwwKdJYt9SONqios2Ax5XwAVJh">Inbox</a>
</li>
<li><a href="http://localhost/Freelance/#">Contact Us</a>
</li>
<li>
<li class='dropdown'> <a class='dropdown-toggle' aria-expanded='false' aria-haspopup='true' role='button' data-toggle='dropdown' href='#'> json2021@gmail.com
<span class='caret'></span> </a>
<ul class='dropdown-menu'>
<li><a href="http://localhost/Freelance/#">Account Settings</a>
</li>
<li><a href="http://localhost/Freelance/#">Financial Summary</a>
</li>
<li><a href="http://localhost/Freelance/#">Contact us</a>
</li>
<li><a href="http://localhost/Freelance/#">Log out</a>
</li>
</ul>
</li>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
&#13;