0
私はこのdivをブートストラップで反応させました。しかし、スタイリングと書式設定は正しくは見えません。展開ボタンをクリックすると、「サインアップ」セクションと「ログイン」セクションが青色とは別のセクションにあり、ラインが乱雑に見えるように感じられます。どのようにしてこのナビをより反応的かつプロフェッショナルなものにすることができますか？ブートストラップでレスキューナビの外観を改善するにはどうすればよいですか？
.navbar {
background: #007BC4 !important;
padding: 10px !important;
}
.nav a {
color: white !important;
}
#sign_up {
position: absolute;
left: 100%;
top: 100%;
transform: translatex(-50%);
}
#email_form, #password_form {
padding: 5px;
font-family: 'Open Sans', sans-serif;
border-radius: 3px;
border: 1px solid #007BC4;
}
#login_button {
background: #0092ea !important;
border: 1px solid #005c93;
font-weight: bold;
font-size: 14px !important;
}
#login_button:hover {
background: #007BC4 !important;
}
#remember_label {
color: white !important;
font-weight: normal !important;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
}
#forgot_password {
color: white !important;
position: relative;
left: 65px;
font-size: 13px !important;
}
#remember {
position: relative;
top: 2px;
}
.navbar-brand{
\t height:auto;
\t padding: 0px 15px;
}
.navbar-brand img{ max-width:250px;width:100%;}
.navbar-nav > li > a{padding-top: 0;}
@media (max-width:1000px) {
\t .navbar-header {
\t float: left;
\t \t width:25%;
\t }
\t .navbar-brand{
\t \t width: 100%;
\t \t margin-top: 12px; \t
\t \t padding:0;
\t }
}
@media (max-width:767px) {
\t .navbar-header {
\t float: left;
\t \t width:100%;
\t \t margin-left: 0 !important;
\t }
\t .navbar-brand{
\t \t width: auto;
\t \t margin-top: 0px;
\t }
\t .navbar-brand img {
\t max-width: 200px;
\t }
\t .navbar-nav {
\t \t width: 100%;
\t \t float: left;
\t \t margin: 7.5px 0;
\t }
\t .navbar-nav > li > a{
\t \t padding: 10px 0;
\t }
\t .navbar-form{
\t \t float: left;
\t }
\t #sign_up {
\t \t position: relative;
\t \t left: 50%;
\t \t top: 0;
\t \t width: 100%;
\t \t padding: 8px 0px;
\t }
\t #email_form, #password_form{
\t \t margin-bottom: 5px;
\t \t width: 100%;
\t }
\t #login_button{
\t \t width: 100%;
\t }
}<!-- CSS Files -->
<link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" rel="home" href="#" title="Buy Sell Rent Everyting">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
</a>
</div>
<!-- Sign Up -->
<div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
\t \t \t <ul class="nav navbar-nav">
<li> <a href="#"><button class="btn btn-success btn-sm" id='sign_up'> Sign Up </button></a> </li>
</ul>
\t \t \t <!-- Login -->
\t \t \t <div class='navbar-form navbar-right'>
\t \t \t <form action='#' method='post'>
\t \t \t <input type='text' placeholder='Email' id='email_form'>
\t \t \t <input type='text' placeholder='Password' type='password' id='password_form'>
\t \t \t <button class="btn btn-primary btn-sm" id='login_button'>Login</button>
\t \t \t </form>
\t \t \t
\t \t \t <input type='checkbox' name='remember' id='remember'> <label for='remember' id='remember_label'> Remember me </label>
\t \t \t
\t \t \t <a href='#' id='forgot_password'> Forgot Password? </a>
\t \t \t
\t \t \t </div>
\t \t \t
\t \t </div>
</div>
</div>
<!-- JS Files -->
<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>
[OK]をクリックして、画面を最小化してナビを展開します。ログインとサインアップの両方を囲む線が見えますか？私はそれらの行をクリーンアップし、またセクションのbgの色を変更したい。それは私に専門的な感じではありません:) – user6902601