1
崩潰不工作嘗試了這麼多的方式。
我在bootstrap中使用某些類或id創建一個navabar來顯示默認數據，當我摺疊瀏覽器時它不工作。在我的代碼或示例中顯示的示例中顯示的圖像中的右側按鈕或ul li位置也不準確，這些位置在我的帖子的上方可以很好地解決此問題。
nav{
\t display: block; \t
}
nav #ss-logo{
\t height: 62px;
width: 206px;
position: relative;
bottom: 5px;
\t right: 32px;
}
nav .btn-primary{
\t 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
}<link rel="stylesheet" href="Assingment_bootstrap.css" type="text/css"/>
\t \t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
\t \t <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">
\t \t \t \t <div class="container">
\t \t \t \t \t <div class="navbar-header">
\t \t \t \t \t \t <button type="button" name="toggle_button" id="toggle_button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my_navbar" area-expanded="false">
\t \t \t \t \t \t \t <span class="sr-only">toggle navigation</span>
\t \t \t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t \t </button>
\t \t \t \t \t \t <a href="#" class="navbar-brand"><img id="ss-logo" src="https://dummyimage.com/100x50" alt="boots_image"></a>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="collapse navbar-collapse" id="my_navbar"> \t
\t \t \t \t \t \t <ul class="nav navbar-nav navbar-right ml-auto color_one">
\t \t \t \t \t \t \t <li class="nav-item active">
\t \t \t \t \t \t \t \t <a id="login" class="nav-link" href="#"><span class="fa fa-lock"> Log in</a>
\t \t \t \t \t \t \t </li>
\t \t \t \t \t \t \t <li class="nav-item">
\t \t \t \t \t \t \t \t <a id="questions" class="nav-link" href="#"> Questions? (877) 442-1693</a>
\t \t \t \t \t \t \t </li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t \t <ul class="nav navbar-nav navbar-right">
\t \t \t \t \t \t \t <li class="nav-item">
\t \t \t \t \t \t \t \t <a class="btn btn-primary" href="#">Try Free for 30 Days</a>
\t \t \t \t \t \t \t </li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </nav>
你在你的HTML –
是增加了 「元視口」 標籤，我加入我的HTML –
這是工作精細檢查這個環節---- https：//開頭codepen。 io/chandrashekhar/pen/jLrRjW –