我想修复导航栏上的 Logo ，我想增加导航栏的高度并在不调整图像大小的情况下修复它 amd 当我将网站缩小到移动 View 时，可以在折叠按钮下方看到 Logo . 网站预览 ( 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-->

样式.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;
 }

最佳答案

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

从 style.css 中删除此 CSS 代码，使折叠按钮位于右侧(而不是 Logo 上方):

.navbar-header {
    width:70px;
    background-color: transparent; //don't necessarily need to remove this one but it isn't serving a purpose currently
}

要在 jumbotron 之外获取 nav 同时保持完整的图像屏幕，请执行以下更新:

将 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 类和导航栏类如下:

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

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

关于html - 我的 bootstrap 和 css 有一些问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31689858/