0
通常、私はただposition: relativeを実行し、left: 500pxを実行します。しかし、ブートストラップについての最も重要な点は、それが応答性であることです。私はBootstrapの応答する機能を取り除きたいとは思わない。どのように私は、私の移動の中でブートストラップにliの中心を置くのですか？ブートストラップにliを集中させる方法
スニペットをフルページモードで表示してください。私の目標は、2つの "リンク"をdivの中央に移動することです。彼らは両方の李です。これをどのように達成するのですか？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Fancy navbar login/sign in form - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{
background:url('http://www.wallpaperup.com/uploads/wallpapers/2012/10/21/20181/cad2441dd3252cf53f12154412286ba0.jpg');
padding:50px;
}
#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
font-size:12px
}
#login-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}
#login-dp .social-buttons{
margin:12px 0
}
#login-dp .social-buttons a{
width: 49%;
}
#login-dp .form-group {
margin-bottom: 10px;
}
.btn-fb{
color: #fff;
background-color:#3b5998;
}
.btn-fb:hover{
color: #fff;
background-color:#496ebc
}
.btn-tw{
color: #fff;
background-color:#55acee;
}
.btn-tw:hover{
color: #fff;
background-color:#59b5fa;
}
@media(max-width:768px){
#login-dp{
background-color: inherit;
color: #fff;
}
#login-dp .bottom{
background-color: inherit;
border-top:0 none;
}
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Login dropdown</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Already have an account?</p></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a>
\t \t \t <ul id="login-dp" class="dropdown-menu">
\t \t \t \t <li>
\t \t \t \t \t <div class="row">
\t \t \t \t \t \t \t <div class="col-md-12">
\t \t \t \t \t \t \t \t Login via
\t \t \t \t \t \t \t \t <div class="social-buttons">
\t \t \t \t \t \t \t \t \t <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
\t \t \t \t \t \t \t \t \t <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a>
\t \t \t \t \t \t \t \t </div>
or
\t \t \t \t \t \t \t \t <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
\t \t \t \t \t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t \t \t \t \t <label class="sr-only" for="exampleInputEmail2">Email address</label>
\t \t \t \t \t \t \t \t \t \t \t <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t \t \t \t \t <label class="sr-only" for="exampleInputPassword2">Password</label>
\t \t \t \t \t \t \t \t \t \t \t <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right"><a href="">Forget the password ?</a></div>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t \t \t \t \t <button type="submit" class="btn btn-primary btn-block">Sign in</button>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t <div class="checkbox">
\t \t \t \t \t \t \t \t \t \t \t <label>
\t \t \t \t \t \t \t \t \t \t \t <input type="checkbox"> keep me logged-in
\t \t \t \t \t \t \t \t \t \t \t </label>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </form>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="bottom text-center">
\t \t \t \t \t \t \t \t New here ? <a href="#"><b>Join Us</b></a>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </li>
\t \t \t </ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
<script type="text/javascript">
</script>
</body>
</html>