使用2個按鈕在引導程序中創建響應式導航欄

Question

我想在引導程序中創建具有2個選項的導航欄。我希望按鈕每個屏幕大小的50％。我已經將我的div類設置爲<div class="col-md-12 col-xs-12 col-sm-12 col-lg-12">

這不應該表明在所有這些屏幕尺寸上，它們每個都有12列嗎？

現在，當屏幕很大（桌面全屏）時，兩個按鈕都是可見的，但是如果我選擇移動視圖，按鈕不可見。

我的代碼如下：

<div class="navbar navbar-default" id="subnav" > 
     <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12"> 

      <div class="collapse navbar-collapse" id="navbar-collapse2" style="text-align: center, margin: auto "> 
      <ul class="nav navbar-nav" style=" width: 100%"> 
       <li class="active" style="width: 50%"><a href="#">Posts</a></li> 
       <li><a href="#loginModal" role="button" data-toggle="modal">Login</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

bootply更新了這一點：http://www.bootply.com/T0rLYTBJy2#

編輯：

我試圖讓小屏幕&大屏幕看起來很像

Answer 1

這是您的Boo的圖像在一個大的vireport上，鏈接被暴露而不是右邊的按鈕。

這裏有兩種方法，你可以這樣做：一個是利用當前的結構，但使手機導航「永久」在所有視口。

第二種方法是使用佔用整個導航欄的兩個下拉按鈕。

在整頁上看到工作片段。

示例1：僅限手機的當前結構navbar。

/* CSS used here will be applied after bootstrap.css */ 
 

 
.navbar-default .navbar-nav > .active > a, 
 
.navbar-default .navbar-nav > li:hover > a { 
 
    border: 0 solid #4285f4; 
 
    border-bottom-width: 2px; 
 
    font-weight: 800; 
 
    background-color: transparent; 
 
} 
 
@media (max-width: 2500px) { 
 
    .navbar-default .navbar-header { 
 
    float: none; 
 
    } 
 
    .navbar-default .navbar-left, 
 
    .navbar-default .navbar-right { 
 
    float: none !important; 
 
    } 
 
    .navbar-default .navbar-toggle { 
 
    display: block; 
 
    } 
 
    .navbar-default .navbar-collapse { 
 
    border-top: 1px solid transparent; 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
 
    } 
 
    .navbar-default.navbar-fixed-top { 
 
    top: 0; 
 
    border-width: 0 0 1px; 
 
    } 
 
    .navbar-default .navbar-collapse.collapse { 
 
    display: none!important; 
 
    } 
 
    .navbar-default .navbar-nav { 
 
    float: none!important; 
 
    margin-top: 7.5px; 
 
    } 
 
    .navbar-default .navbar-nav>li { 
 
    float: none; 
 
    } 
 
    .navbar-default .navbar-nav>li>a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    } 
 
    .navbar-default .collapse.in { 
 
    display: block !important; 
 
    } 
 
    .navbar-default .navbar-nav .dropdown-menu > li > a, 
 
    .navbar-default .navbar-nav .dropdown-menu > li > a:hover, 
 
    .navbar-default .navbar-nav .dropdown-menu > li > a:focus { 
 
    color: #777; 
 
    } 
 
    .navbar-default .navbar-nav .open .dropdown-menu { 
 
    position: static; 
 
    float: none; 
 
    width: auto; 
 
    margin-top: 0; 
 
    background-color: transparent; 
 
    border: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default" id="subnav"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> <a href="#" style="margin-left:15px;" class="navbar-btn btn btn-default btn-plus dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-home" style="color:#dd1111;"></i> Home <small><i class="glyphicon glyphicon-chevron-down"></i></small></a> 
 

 
     <ul class="nav dropdown-menu"> 
 
     <li><a href="#"><i class="glyphicon glyphicon-user" style="color:#1111dd;"></i> Profile</a> 
 

 
     </li> 
 
     <li><a href="#"><i class="glyphicon glyphicon-dashboard" style="color:#0000aa;"></i> Dashboard</a> 
 

 
     </li> 
 
     <li><a href="#"><i class="glyphicon glyphicon-inbox" style="color:#11dd11;"></i> Pages</a> 
 

 
     </li> 
 
     <li class="nav-divider"></li> 
 
     <li><a href="#"><i class="glyphicon glyphicon-cog" style="color:#dd1111;"></i> Settings</a> 
 

 
     </li> 
 
     <li><a href="#"><i class="glyphicon glyphicon-plus"></i> More..</a> 
 

 
     </li> 
 
     </ul> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse2"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse2"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="active"><a href="#">Posts</a> 
 

 
     </li> 
 
     <li><a href="#loginModal" role="button" data-toggle="modal">Login</a> 
 

 
     </li> 
 
     <li><a href="#aboutModal" role="button" data-toggle="modal">About</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

實施例2：就在兩個下拉按鈕。

.no-gutter >[class*='col-'] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
} 
 
.navbar-custom .btn.btn-nv { 
 
    border-radius: 0; 
 
    height: 50px; 
 
    margin: 0; 
 
    border: 0; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
 
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
} 
 
.navbar-custom .btn.btn-nv:first-child { 
 
    border-right: 1px solid rgba(0, 0, 0, .075) 
 
} 
 
.navbar-custom .dropdown .dropdown-menu { 
 
    width: 100%; 
 
    border-radius: 0; 
 
} 
 
.navbar-custom .dropdown .dropdown-menu-right { 
 
    text-align: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-static-top navbar-custom"> 
 
    <div class="container-fluid"> 
 
    <div class="row no-gutter"> 
 
     <div class="col-xs-6"> 
 
     <div class="dropdown"> 
 
      <button class="btn btn-default navbar-btn btn-block dropdown-toggle btn-nv" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="glyphicon glyphicon-home" style="color:#dd1111;"></i> Home <small><i class="glyphicon glyphicon-chevron-down"></i></small> 
 

 
      </button> 
 
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
      <li><a href="#"><i class="glyphicon glyphicon-user" style="color:#1111dd;"></i> Profile</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-dashboard" style="color:#0000aa;"></i> Dashboard</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-inbox" style="color:#11dd11;"></i> Pages</a> 
 

 
      </li> 
 
      <li class="nav-divider"></li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-cog" style="color:#dd1111;"></i> Settings</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-plus"></i> More..</a> 
 

 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
     <div class="dropdown"> 
 
      <button class="btn btn-default navbar-btn btn-block dropdown-toggle btn-nv" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="glyphicon glyphicon-home" style="color:#dd1111;"></i> Home <small><i class="glyphicon glyphicon-chevron-down"></i></small> 
 

 
      </button> 
 
      <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1"> 
 
      <li><a href="#"><i class="glyphicon glyphicon-user" style="color:#1111dd;"></i> Profile</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-dashboard" style="color:#0000aa;"></i> Dashboard</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-inbox" style="color:#11dd11;"></i> Pages</a> 
 

 
      </li> 
 
      <li class="nav-divider"></li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-cog" style="color:#dd1111;"></i> Settings</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-plus"></i> More..</a> 
 

 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

只是按鈕：這應該給你一個基地然而風格，你想。

.navbar.navbar-custom { 
 
    background-color: transparent; 
 
} 
 
.no-gutter >[class*='col-'] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
} 
 
.navbar-custom .btn.btn-nv { 
 
    border-radius: 0; 
 
    height: 50px; 
 
    margin: 0; 
 
    border: none; 
 
} 
 
.navbar-custom .btn.btn-nv:hover, 
 
.navbar-custom .btn.btn-nv:focus, 
 
.navbar-custom .btn.btn-nv:active, 
 
.navbar-custom .btn.btn-nv.active, 
 
.open > .dropdown-toggle.btn-nv { 
 
    border: 0 solid #4285f4; 
 
    border-bottom-width: 2px; 
 
    font-weight: 800; 
 
    background-color: transparent; 
 
    outline: none; 
 
} 
 
.navbar-custom .btn.btn-nv:first-child { 
 
    border-right: 1px solid rgba(0, 0, 0, .075); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-static-top navbar-custom"> 
 
    <div class="container-fluid"> 
 
    <div class="row no-gutter"> 
 
     <div class="col-xs-6"> 
 
     <button class="btn btn-default navbar-btn btn-block btn-nv" type="submit">Posts</button> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
     <button class="btn btn-default navbar-btn btn-block btn-nv" type="submit">Login</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>