引导的导航定位问题

时间：2019-01-31 18:09:19

标签： twitter-bootstrap bootstrap-4

所以我有一个用引导程序4构建的网站即时消息，并且有一些问题。如果有人可以帮助我，则需要帮助。该站点位于www.castawayministries.com/newsite/。我在网上发现的每件事都不起作用

  1. 我在主导航多个dropdows，发现每个都有一个id =“navbarDropdown”您只能有相同名称的一个ID每个HTML页面上的标签。如果我像navbarDropdownAbout那样添加一个，对每个这样的ID分别具有不同的ID，这有关系吗？到目前为止，下拉菜单似乎还可以正常工作。
  2. 在徽标位于左侧的情况下尝试将导航移至最右侧，但“ justify-content-end”，“ ml-auto”，“ mr-auto”这些都不在做什么，我不确定这是为什么。
  3. 除此之外，我希望任何人都可以检出并让我知道我做错了或应该更改的东西。

尝试过“ justify-content-end”，“ ml-auto”，“ mr-auto”

导航应右对齐

1 个答案:

答案 0 :(得分：-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中，rows是Bootstrap中的Flex容器，columns，按Bootstrap Docs ，只能将navbar作为直接子代：

  

在网格布局中，必须将内容放置在列中，并且只有列可以是行的直接子代。

justify-content-end不是，这使得该行不使用屏幕的整个宽度，而仅适合其内容，因此当您设置row时，您不会看到更改，因为容器（该行）已经全宽，因此没有剩余空间来布置项目。

要解决此问题，您可以删除包含navbar的{​​{1}}并仅保留导航栏，也可以在不删除col div的情况下向导航栏添加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>

相关问题
最新问题