Создание загрузочного бутстрапа nav (проблемы с выравниванием)

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-menu и .nav-bar имеют фиксированную ширину. Вы можете установить .фото-меню, чтобы иметь ширину: авто и играть с позицией: относительная. И .nav-bar max-width: 415px.

Это также полезно, если вы используете классы столбцов, которые есть в бутстрапе. (col-lg-x, col-md-x, col-sm-x, col-xs-x). Узнайте больше об этом здесь: http://getbootstrap.com/css/#grid

Надеюсь, что это поможет!