Question

我发现了一些其他帖子，但是引导代码已经过时或者我没有错误地实现它。

简单地说，我希望“轰炸机曲棍球”坐在左侧，链接位于导航栏的右侧。 HTML -

* {
  margin: 0;
  padding: 0;
  border: none;
}

img {
  max-width: 100%;
}

ul li .navbar-right {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<body>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="index.html">Bombers Hockey</a>
      <button class="navbar-toggler" 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 mr-auto">
          <li class="nav-item active">
            <a class="nav-link navbar-right" href="index.html">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link navbar-right" href="sched.html">Schedule</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navbar-right" href="stats.html">Stats</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navbar-right" href="pics.html">Pictures</a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="container">
      <img src="pics/jerseys.jpg">
    </div>
  </div>
</body>

我尝试了多种方式进行定位。 li，ul，.navbar-right，pull-right，ul li a等等没有移动那些链接。

Answer 1

请检入整页代码段。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>


<body>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between">
      <a class="navbar-brand" href="index.html">Bombers Hockey</a>
      <button class="navbar-toggler" 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 mr-auto">
          <li class="nav-item active">
            <a class="nav-link navbar-right" href="index.html">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link navbar-right" href="sched.html">Schedule</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navbar-right" href="stats.html">Stats</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navbar-right" href="pics.html">Pictures</a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="container">
      <img src="pics/jerseys.jpg">
    </div>
  </div>
</body>

def main():
    found = False
    coffee_file = ('c:/test/coffee.txt', 'r')
    search = input("Enter a description to search :- ")

    descr = coffee_file.readline()

    while (descr != ''):
        qty = (coffee_file.readline())
        descr = descr.rstrip('\n')
        qty = qty.rstrip('\n')

        if ('search' == descr):
            print("Description :- ", descr)
            print("Quantity :- ", qty)
            print

            found = True

        descr = coffee_file.readline()

    coffee_file.close()


main()

Answer 2

您只需要将 mr-auto 类更改为 ml-auto w-100 justify-content-end 到ul元素，并且应该将链接与正确的。除此之外，您编写的HTML标记没有变化。

希望下面的代码有帮助（PS：没有注意到你在我之前的回复中使用了Bootstrap 4 beta）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
		border: none;
	}

	img { max-width: 100%; }
</style>

<div class="container">
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
		<a class="navbar-brand" href="index.html">Bombers Hockey</a>
		<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
			aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div id="navbarNavDropdown" class="navbar-collapse collapse">
			<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
				<li class="nav-item active">
					<a class="nav-link navbar-right" href="index.html">Home <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item">
					<a class="nav-link navbar-right" href="sched.html">Schedule</a>
				</li>
				<li class="nav-item">
					<a class="nav-link navbar-right" href="stats.html">Stats</a>
				</li>
				<li class="nav-item">
					<a class="nav-link navbar-right" href="pics.html">Pictures</a>
				</li>
			</ul>
		</div>
	</nav>
</div>

我无法覆盖导航栏中的引导程序

2 个答案: