制作響應式引導導航（對齊問題）

Question

我使用引導程序創建了一個導航，但是它沒有響應我想要的方式。 我希望它與照片菜單中的第一張圖像對齊（單擊相機圖標時打開），我希望它與所有屏幕尺寸都對齊。 我已經嘗試過邊際利潤，但是我不確定這是否是最好的方法，但是比例沒有很好地降低。

網站： http ： //explorecanterbury.co.uk/#

謝謝

Answer 1

您有一個.container包裝您的.container-fluid 。 這違反了流體容器的目的。 卸下最里面的流體容器，然后用流體容器替換最外面的容器。 您可以在下面的兩個摘要中看到差異。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- ↓ this should be container-fluid ↓ --> <div class="container"> <nav class="navbar navbar-default" style="z-index:2;"> <!-- ↓ this shouldn't be here at all ↓ --> <div class="container-fluid" style="padding-left: 5px;"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="LocIcon"></span></li> <ul class="dropdown-menu"> <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox">&nbsp;Museums and Galleries</a></li> <li><a href="#" class="small" data-value="option3" tabindex="-1"><input type="checkbox">&nbsp;Landmarks</a></li> <li><a href="#" class="small" data-value="option4" tabindex="-1"><input type="checkbox">&nbsp;Shopping</a></li> <li><a href="#" class="small" data-value="option5" tabindex="-1"><input type="checkbox">&nbsp;Churches</a></li> <li><a href="#" class="small" data-value="option6" tabindex="-1"><input type="checkbox">&nbsp;Tours and Guides</a></li> </ul> <li><span class="photosIcon nav-toggle-2 hidden-xs"></span></li> <li><span class="infoIcon nav-toggle-3 hidden-xs"></span></li> <li><span class="searchIcon hidden-xs"></span></li> </ul> <form class="navbar-form hidden-xs" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> </div> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="container-fluid"> <nav class="navbar navbar-default" style="z-index:2;"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="LocIcon"></span></li> <ul class="dropdown-menu"> <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox">&nbsp;Museums and Galleries</a></li> <li><a href="#" class="small" data-value="option3" tabindex="-1"><input type="checkbox">&nbsp;Landmarks</a></li> <li><a href="#" class="small" data-value="option4" tabindex="-1"><input type="checkbox">&nbsp;Shopping</a></li> <li><a href="#" class="small" data-value="option5" tabindex="-1"><input type="checkbox">&nbsp;Churches</a></li> <li><a href="#" class="small" data-value="option6" tabindex="-1"><input type="checkbox">&nbsp;Tours and Guides</a></li> </ul> <li><span class="photosIcon nav-toggle-2 hidden-xs"></span></li> <li><span class="infoIcon nav-toggle-3 hidden-xs"></span></li> <li><span class="searchIcon hidden-xs"></span></li> </ul> <form class="navbar-form hidden-xs" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> </div> </form> </div><!-- /.navbar-collapse --> </nav> </div> 

Answer 2

具有響應元素的關鍵是沒有特定的寬度或至少將特定的寬度設置為特定的斷點。

.photo菜單和.nav-bar都有固定的寬度。 您可以將.photo-menu設置為width：auto並以position：relative播放。 .nav-bar最大寬度：415像素。

如果您使用引導程序具有的列類，這也將很有幫助。 （col-lg-x，col-md-x，col-sm-x，col-xs-x）。 在此處了解有關此內容的更多信息： http ://getbootstrap.com/css/#grid

希望有幫助！