вопрос выравнивания начальной загрузки

Question

Итак, у меня есть сайт, который я создаю с начальной загрузкой 4 и у меня есть несколько проблем.Нужна помощь, если кто-нибудь может мне помочь.Сайт находится по адресу www.castawayministries.com/newsite/.Все, что я обнаружил в Интернете, не работает

1. У меня есть несколько раскрывающихся списков в главном меню и я заметил, что у каждого тега есть id = "navbarDropdown", у которого вы можете иметь только один идентификатородно и то же имя на каждой HTML-странице.Имеет ли значение, если я добавлю как navbarDropdownAbout к одному и так далее для каждого, имеющего разные идентификаторы для каждого?пока что выпадающие списки работают нормально.
2. Попытка заставить навигацию перейти в крайнее правое положение, когда логотип находится слева, но "justify-content-end", "ml-auto", "mr-auto"Никто из них ничего не делает, и я не уверен, почему.
3. Кроме этого, я хотел бы, чтобы кто-нибудь проверил это и дал мне знать, что я сделал не так, или должен измениться или что-то еще.

Попробовали "justify-content-end", "ml-auto", "mr-auto"

Навигация должна быть выровнена вправо

Answer 1

Прежде всего, это код, который у вас есть на странице (должен быть на вашем вопросе)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand" href="#"><img src="images/logo.jpg" width="129" height="85" alt="Castaway Ministries Logo"></a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
								<span class="navbar-toggler-icon"></span>
							</button>


    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
											About
										</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Our Mission</a>
            <a class="dropdown-item" href="#">Our Vision</a>
            <a class="dropdown-item" href="#">Our Staff</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
											Requirements
										</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Privileges</a>
            <a class="dropdown-item" href="#">Rules and Regulations</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
											Gallery
										</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">2013</a>
            <a class="dropdown-item" href="#">2016</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact us</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

Теперь ваша проблема может быть решена двумя способами: у вас есть .navbar внутри .row, который является контейнером Flex в Bootstrap, rows,per Документы начальной загрузки , должны иметь только columns в качестве прямых дочерних элементов:

В макете сетки содержимое должно размещаться в столбцах, и только столбцы могут быть непосредственными дочерними элементами строк.

Это не navbar, поэтому строка не будет использовать всю ширину экрана и будет соответствовать только его содержимому, поэтому при установке justify-content-end вы не увидите изменений, потому чтоКонтейнер (строка) уже во всю ширину, поэтому места для размещения элементов не осталось.

Чтобы решить эту проблему, вы можете удалить row, содержащий navbar, и просто покинуть панель навигации, илидобавьте класс col к панели навигации без удаления содержащего его элемента row, чтобы он вел себя как следует.

Я бы рекомендовал удалить строку, так как она действительно не нужна и добавляет отрицательные поля, которые вам могут не понадобиться.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="">
  <!-- Remove the row -->
  <nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand" href="#"><img src="images/logo.jpg" width="129" height="85" alt="Castaway Ministries Logo"></a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    								<span class="navbar-toggler-icon"></span>
    							</button>


    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto"> <!-- Add ml-auto to align right -->
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    											About
    										</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Our Mission</a>
            <a class="dropdown-item" href="#">Our Vision</a>
            <a class="dropdown-item" href="#">Our Staff</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    											Requirements
    										</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Privileges</a>
            <a class="dropdown-item" href="#">Rules and Regulations</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    											Gallery
    										</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">2013</a>
            <a class="dropdown-item" href="#">2016</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact us</a>
        </li>
      </ul>
    </div>
  </nav>
</div>


<div class="row">
  <nav class="col navbar navbar-expand-lg navbar-light">
    <!-- Add a col class -->
    <a class="navbar-brand" href="#"><img src="images/logo.jpg" width="129" height="85" alt="Castaway Ministries Logo"></a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    								<span class="navbar-toggler-icon"></span>
    							</button>


    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto"> <!-- Add ml-auto to align right -->
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    											About
    										</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Our Mission</a>
            <a class="dropdown-item" href="#">Our Vision</a>
            <a class="dropdown-item" href="#">Our Staff</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    											Requirements
    										</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Privileges</a>
            <a class="dropdown-item" href="#">Rules and Regulations</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    											Gallery
    										</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">2013</a>
            <a class="dropdown-item" href="#">2016</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact us</a>
        </li>
      </ul>
    </div>
  </nav>
</div>