Question

当我使用位置相对来调整按钮的位置和ul，li时， bootstrap中还有其他属性吗？。我想在不使用css属性的情况下创建这个导航栏。

I need create same nav-bar with using bootstrap

＆＃13;

.full_image{
    font-family: Lato,"Helvetica Neue",Arial,sans-serif;
}
#top-nav {
    width: 100%;
    position: fixed;
    top: 0;
    background-color: #000;
    height: 70px;
    z-index: 999;
}
nav{
	display: block;	
}
nav #ss-logo{
	height: 62px;
    width: 206px;
    position: relative;
    bottom: 5px;
}
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.row {
    margin-right: -15px;
    margin-left: -15px;
}
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9
{
	float
}
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;
    position: relative;
    left: 36%;
    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
}
#hero_area{
	position: fixed;
    background: url(features_hero_bg.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    margin: 0 0 0 -15px;
    color: #fff;
    z-index: -1;
}
.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
}
#hero_area h1 {
    font-family: Lato,sans-serif;
    font-size: 60px;
    font-weight: 700;
    width: 1180px;
    margin: 210px auto 30px;
}
#hero_area p {
    width: 1180px;
    line-height: 1.2;
    font-family: lato,sans-serif;
    font-size: 32px;
    font-weight: 400;
    margin-left: auto;
    margin-right: auto;
    padding-right: 510px;
}
#hero_area>* {
    padding-left: 15px;
}	
a:focus, a:hover
{
	    color: #23527c;
    text-decoration: underline;
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<title>Assingment 3</title>
		<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>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body class="full_image">
		<form name="assingment_three" id="assingment_three">
			<nav id="top-nav" class="full-width navbar navbar-inverse dark-bg navbar-toggleable-md">
				<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#containerNavbar" aria-controls="containerNavbar" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="container">
					<div class="col-md-4 col-sm-4 col-xs-3">
						<a href="/"><img id="ss-logo" src="logo-white.png" alt="SugarSync"></a>
					</div>
					<div class="navbar-collapse collapse" id="containerNavbar">
						<ul class="navbar-nav 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>
							<li class="nav-item">
								<a class="btn btn-primary" href="#">Try Free for 30 Days</a>
							</li>
						</ul>
					</div>
				</div>
				</div>
			</nav>
		</form>	
		<div class="wrapper">
			<div class="col-md-12 content">
				<div id="hero_area" class="page-header">
					<h1>Features</h1>
					<p>With SugarSync, your files and folders are always accessible from anywhere.</p>
				</div>
			</div>
		</div>	
	</body>
</html>

＆＃13;

如何在不使用位置相对

0 个答案: