制作响应式引导导航（对齐问题）

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

希望有帮助！