Question

我想修改导航栏上的徽标，我想要增加导航栏的高度并修改它而不调整图像大小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;
 }

Answer 1

根据您的问题，这里的评论和屏幕截图是以下建议：

从 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.
}

如果我没有回答您的所有问题，请在下方发表评论，以便我可以更新我的答案。

Answer 2

修改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

之类的结构

这会将徽标放在标题内，也可以在移动视图中将其放在折叠按钮之前。

我的bootstrap和css

2 个答案: