我的bootstrap和CSS有一些问题

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，请执行以下更新：

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

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