我想修改导航栏上的徽标,我想要增加导航栏的高度并修改它而不调整图像大小amd当我将网站缩小到移动视图时,徽标会显示在折叠按钮下方。 网站预览(http://threeguys.us/works/testing.html)
testing.html
<div class="jumbotron">
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Rates</a></li>
<li><a href="#">Employee</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<div class="call_button">
<button type="button" class="btn btn-default">call us</button>
</div>
</div>
</div><!--jumbotron end-->
的style.css
.jumbotron
{
text-align: center;
background-size: cover;
background-image: url(images/car/car.png);
}
.container
{
padding:0px;
}
.navbar
{
height: 60px;
background-color: transparent;
border:0px;
padding-top: 0px;
}
.navbar-header
{
width:70px;
background-color: transparent;
}
ul
{
padding:0;
}
.call_button
{
margin-top : 428px;
}
.content
{
background-color: white;
padding-top:0px;
}
.footer-nav
{
text-align: center;
}
.text_order
{
background-image: url(images/text_order/rectangle.jpg);
text-align: center;
padding: 5px;
}
.text_order p
{
font-size: 20px;
}
.footer-nav li
{
display: inline;
}
.footer-nav li a
{
padding-left: 50px;
text-decoration: none;
color: #f7ab00;
}
.footer-nav li a:hover
{
color:black;
}
答案 0 :(得分:2)
根据您的问题,这里的评论和屏幕截图是以下建议:
从 style.css 删除此CSS代码,因此折叠按钮位于右侧(而不是徽标上方):
.navbar-header {
width:70px;
background-color: transparent; //don't necessarily need to remove this one but it isn't serving a purpose currently
}
要在保留完整图像屏幕的同时获取nav
之外的jumbotron
,请执行以下更新:
将testing.html 更新为以下内容:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Rates</a></li>
<li><a href="#">Employee</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<div class="call_button">
<button type="button" class="btn btn-default">call us</button>
</div>
</div>
</div><!--jumbotron end-->
将 style.css jumbotron类和navbar类更新到以下内容:
.jumbotron {
text-align: center;
background-size: cover;
background-image: url(images/car/car.png);
margin-top: -80px; //include this account for the height of the navbar and it's margin
}
.navbar {
height: 60px;
background-color: transparent;
border: 0px;
padding: 0 120px; //the 120px value will push the logo and menu nav closer together. You will need to update your collapse breakpoints though. Adjust as you see fit.
}
如果我没有回答您的所有问题,请在下方发表评论,以便我可以更新我的答案。
答案 1 :(得分:1)
修改HTML流程。避免将#include <iostream>
#include <string>
#include <vector>
union S {
std::string str;
std::vector<int> vec;
~S() {} // needs to know which member is active, only possible in union-like class
}; // the whole union occupies max(sizeof(string), sizeof(vector<int>))
int main()
{
S s = {"Hello, world"};
// at this point, reading from s.vec is UB
std::cout << "s.str = " << s.str << '\n';
s.str.~basic_string<char>();
new (&s.vec) std::vector<int>;
// now, s.vec is the active member of the union
s.vec.push_back(10);
std::cout << s.vec.size() << '\n';
s.vec.~vector<int>();
}
放在nav
内。
使用this
这会将徽标放在标题内,也可以在移动视图中将其放在折叠按钮之前。