-2
Ok, ich habe dieses responsive Nav in Bootstrap. Wenn Sie das Fenster minimieren, wird das Navigationsfenster transformiert und Sie können den Inhalt erweitern. Aber wenn Sie den Inhalt erweitern, scheinen die Linien, die Hintergrundfarbe und das Logo unprofessionell zu sein? Wie repariere ich? Es sieht nicht richtig aus ....Wie behebe ich die Zeilenformatierung für mein nav Bootstrap?
.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>
Sie müssen eigentlich grundlegendes Design lernen und sie in CSS implementieren. Bitte stelle keine Frage, wie mache ich das besser. – sandiprb
Was professionell aussieht ist subjektiv, wenn Sie nach Designhilfe suchen, versuchen Sie es http://ux.stackexchange.com/ –
@sandip_rb Ok, aber wie behebe ich die Linien des expandierenden Abschnitts? Ich frage nicht nach professionellem Design, sondern nach Programmierhilfe. – user6902601