Bootstrap导航栏-文本布局

时间：2018-11-14 13:18:01

标签： bootstrap-4 nav

我正在尝试在自己正在工作的网站上设置导航栏，但是我遇到了一些问题。

在我的导航栏下面的代码中，文本显示在单独的行上，我只希望它在折叠视图而不是普通视图中执行。有任何想法吗？我可能只是在这里很蠢，但是任何帮助都值得赞赏。 （此外，请提供任何提示或有关良好做法的任何信息或我做错了的事情，以便将来解决。）

* {

	padding: 0;
	margin: 0;
}

html, body {
	
	height: 100%;
	width: 100%;
}

.container-fluid {

	padding: 0px !important;
}

#collapsedNavbar  {
	
	text-align: center;
}

#header {
	
	height: 100px;
	margin-top: 75px;
	text-align: center;
}

#content-container {
	
	
}

#content {

}

#art-work {
	
}
<!DOCTYPE html>
<html>

	<head>
	
		<meta charset="UTF-8">
		<meta name="author" content="Conner Murphy">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 viewport-fit=cover">
		
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		
		<!-- Custom CSS -->
		<link rel="stylesheet" href="./css/index-style.css">
		
		<!-- Scripts -->
		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
		
		<title> </title>
	
	</head>
	
	<body>
	
		<nav class="navbar navbar-expand-md navbar-light justify-content-end">
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsedNavbar" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			
			<div class="collapse navbar-collapse" id="collapsedNavbar">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item">
						<a href="#" class="nav-link">Art Work</a>
						<a href="#" class="nav-link">Graphics/Design</a>
						<a href="#" class="nav-link">Other</a>
					</li>
				</ul>
			</div>
		
		</nav>
	
		<div class="container-fluid" id="content-container">
		
			<div class="container" id="header">
				
				<div class="row">
				
					<div class="col-sm-12">
						<h1>Test Title</h1>
					</div>
				
				</div>
				
			</div>
			
			<div class="container-fluid" id="content">
			
				<div class="container" id="art-work">
				
					
				
				</div>
			
			</div>
		
		</div>
		
		<footer class="footer">
		
			<div class="container">
			
			</div>
		
		</footer>
	
	</body>

</html>

1 个答案:

答案 0 :(得分：0)

不是将nav-link包裹在nave-item中，而是将导航项包裹在navbar-nav中，请参见documentation 

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

.container-fluid {
  padding: 0px !important;
}

#collapsedNavbar {
  text-align: center;
}

#header {
  height: 100px;
  margin-top: 75px;
  text-align: center;
}

#content-container {}

#content {}

#art-work {}
<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <meta name="author" content="Conner Murphy">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0 viewport-fit=cover">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="./css/index-style.css">

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <title> </title>

</head>

<body>

  <nav class="navbar navbar-expand-md navbar-light justify-content-end">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsedNavbar" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

    <div class="collapse navbar-collapse" id="collapsedNavbar">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a href="#" class="nav-link">Art Work</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Graphics/Design</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Other</a>
        </li>
      </ul>
    </div>

  </nav>

  <div class="container-fluid" id="content-container">

    <div class="container" id="header">

      <div class="row">

        <div class="col-sm-12">
          <h1>Test Title</h1>
        </div>

      </div>

    </div>

    <div class="container-fluid" id="content">

      <div class="container" id="art-work">



      </div>

    </div>

  </div>

  <footer class="footer">

    <div class="container">

    </div>

  </footer>

</body>

</html>

相关问题
最新问题