折叠在navabar中不起作用

时间：2017-08-02 10:27:39

标签： html css twitter-bootstrap

Exactly i want to create like this

崩溃不工作尝试了这么多方法。

我使用某个类或id在bootstrap中创建一个navabar来显示默认数据，当我崩溃浏览器时它无法正常工作。右键或ul li位置也不准确我的代码或显示图像中显示的示例在我的帖子上方，请解决此问题。

＆＃13;
＆＃13; 
nav{
	display: block;	
}
nav #ss-logo{
	height: 62px;
    width: 206px;
    position: relative;
    bottom: 5px;
	right: 32px;
}
nav .btn-primary{
	background-color: #2eb066;
    /**padding: 15px 15px;**/
    border-color: #2eb066;
    text-transform: uppercase;
    background: #02a15e;
    border-radius: 5px;
    color: #fff;
    padding-left: 4px;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    padding: 18px 0;
    line-height: 16px;
    margin-left: 0;
    width: 279px;
    text-align: center;
}
nav #questions{
  font-family: 'Verdana';
  letter-spacing: -1.2px;
  font-size: .8em;
  line-height:30px;
  color: #FFF;
}
nav #login {
  color:#2eb066;
  text-transform:uppercase;
  font-family: 'Verdana';
  letter-spacing: 2px;
  font-size: .8em;
  line-height:30px
}
nav li a{
  color: #FFF;
}
nav li{
  padding:0px 10px
}
＆＃13; 
<link rel="stylesheet" href="Assingment_bootstrap.css" type="text/css"/>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    
<nav id="top-nav" class="full-width navbar navbar-inverse dark-bg navbar-toggleable-md">
				<div class="container">
					<div class="navbar-header">
						<button type="button" name="toggle_button" id="toggle_button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my_navbar" area-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>
						<a href="#" class="navbar-brand"><img id="ss-logo" src="https://dummyimage.com/100x50" alt="boots_image"></a>
					</div>
					<div class="collapse navbar-collapse" id="my_navbar">	
						<ul class="nav navbar-nav navbar-right ml-auto color_one">
							<li class="nav-item active">
								<a id="login" class="nav-link" href="#"><span class="fa fa-lock"> Log in</a>
							</li>
							<li class="nav-item">
								<a id="questions" class="nav-link" href="#"> Questions? (877) 442-1693</a>
							</li>
						</ul>
						<ul class="nav navbar-nav navbar-right">
							<li class="nav-item">
								<a class="btn btn-primary" href="#">Try Free for 30 Days</a>
							</li>
						</ul>
					</div>
				</div>
			</nav>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您可以使用解决方案https://jsfiddle.net/6a7vg5nn/2/

＆＃13;
＆＃13; 
nav{
	display: block;	
}
nav #ss-logo{
	height: 62px;
    width: 206px;
    position: relative;
    bottom: 5px;
	right: 32px;
}
nav .btn-primary{
	background-color: #2eb066;
    /**padding: 15px 15px;**/
    border-color: #2eb066;
    text-transform: uppercase;
    background: #02a15e;
    border-radius: 5px;
    color: #fff;
    padding-left: 4px;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    padding: 18px 0;
    line-height: 16px;
    margin-left: 0;
    width: 279px;
    text-align: center;
}
nav #questions{
  font-family: 'Verdana';
  letter-spacing: -1.2px;
  font-size: .8em;
  line-height:30px;
  color: #FFF;
}
nav #login {
  color:#2eb066;
  text-transform:uppercase;
  font-family: 'Verdana';
  letter-spacing: 2px;
  font-size: .8em;
  line-height:30px
}
nav li a{
  color: #FFF;
}
nav li{
  padding:0px 10px
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#my_navbar" aria-controls="my_navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#"><img id="ss-logo" src="logo-white.png" alt="boots_image" /></a>

  <div class="collapse navbar-collapse" id="my_navbar">
    <ul class="navbar-nav navbar-right mr-auto color_one">
      <li class="nav-item active">
        <a class="nav-link" href="#"><span class="fa fa-lock"> Log in</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Questions? (877) 442-1693</a>
      </li> 
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li class="nav-item navbar-right">
       <a class="btn btn-primary" href="#">Try Free for 30 Days</a>
      </li>
    </ul>
  </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

修改HTML中的.navbar标头

HTML 

    <div class="navbar-header">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#my_navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    </div>

Working codepen

相关问题
最新问题