我有一个Django支持的Bootstrap网站。我使用主题Modern Business by Start Bootstrap。
这就是它在the live sample上的样子:
它在my website上的显示方式(请注意徽标下方的资源文字):
这是我的导航栏代码。
{% load static from staticfiles %}
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarExample" aria-controls="navbarExample" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container" style="height: 48px;">
<a class="navbar-brand" href="index.html">
<img src="{% static 'web/img/header-logo-2.png' %}" height="70px" style="height: 50px;
position: absolute;
top: 0;"></a>
<div class="collapse navbar-collapse" id="navbarExample">
<ul class="navbar-nav ml-auto">
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item" href="">Board of Directors</a>
<a class="dropdown-item" href="about-staff">Executive Administration</a>
</div>
</li>-->
<!--<li class="nav-item">
<a class="nav-link" href="schools">Schools</a>
</li>-->
<!--<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Resources
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item"
href="https://www.dropbox.com/s/ngzaxhg4gqlibpx/2016-2017%20OCDL%20Charter.pdf?dl=0"
target="_blank">League Charter</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/0nh1a93og93vqt0/OCDL%20Affidavit%202015-2016.pdf?dl=0"
target="_blank">Student Agreement</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/en1t2ek23rxzxlj/OCDL%20Judges%20Affidavit.pdf?dl=0"
target="_blank">Judge Agreement</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/lwxsnbpmc29vylq/OCDL%20Judge%20Guide-11-4-15.pdf?dl=0"
target="_blank">Judge Guide</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/tkcvaggipfn91fi/Flow%20Chart%2C%20Orange%20County%20Debate%20League.docx?dl=0"
target="_blank">Blank Flowchart</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/vphswry1d4rgm0d/Speaker%20Performance%20Rubric%2C%20Orange%20County%20Debate%20League.pdf?dl=0"
target="_blank">OCDL Rubric</a>
</div>
</li>
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Blog
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
<a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
<a class="dropdown-item" href="blog-post.html">Blog Post</a>
</div>
</li>-->
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Other Pages
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="full-width.html">Full Width Page</a>
<a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
<a class="dropdown-item" href="faq.html">FAQ</a>
<a class="dropdown-item" href="404.html">404</a>
<a class="dropdown-item" href="pricing.html">Pricing Table</a>
</div>
</li>-->
</ul>
</div>
</div>
</nav>
答案 0 :(得分:1)
您只需为特定屏幕宽度添加媒体查询即可。在您的情况下,引导程序导航栏将以768px的屏幕宽度更改,因此只需将其添加到您的css文件中:
@media screen and (max-width: 787px) {
.navbar-inverse {
opacity: 0.9;
}
}