引導4導航欄倒塌與右列中的元素

我想了很久，以實現在同一行中使用引導4.我的主要目標是展示3個品牌文本移動菜單切換按鈕用於移動菜單菜單。但不幸的是，當我點擊切換按鈕時，3個品牌正在摺疊菜單下方。即使在摺疊菜單後，我也希望3個品牌與切換按鈕一起保持在最前面。我的問題是摺疊菜單正在使用100％的列寬，這最終將3個品牌推下菜單。任何幫助將升值。引導4導航欄倒塌與右列中的元素

目標解決方案

HTML

<body id="page-top"> 
<nav class="navbar navbar-dark bg-primary navbar-fixed-top"> 
    <div class="container"> 

    <button class="navbar-toggler hidden-md-up pull-xs-right" data-target="#collapsenav" data-toggle="collapse" type="button"> 
      ☰ 
     </button> 
    <div class="row"> 
     <div class="col-md-6 col-sm-12 col-xs-12"> 
      <div class="navbar-toggleable-sm collapse text-xs-center" id="collapsenav"> 
       <ul class="nav navbar-nav"> 
        <li class="nav-item"><a class="nav-link" href="#">About</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Resume</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-1</a> 
     </div> 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-2</a> 
     </div> 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-3</a> 
     </div> 
    </div> 
    </div> 
</nav> 
</body>

CODEPEN

來源

2017-04-06 Saif Md Towfiq Islam

最好是使用最新的alpha 6，而不是alpha 3.這可能適合你嗎？ – ZimSystem

是的，當然，我可以使用Alpha 6，但它如何才能達到我期待的解決方案幫助嗎？任何想法@ZimSystem？ –

此外，解釋你會看到該菜單的非流動橫版..以前都是坍縮成移動版的內容。 – ZimSystem

嘗試對準新的引導4阿爾法6 Flexbox的事業，並保持標記簡單：

http://www.codeply.com/go/OFXaPnKx2P

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary fixed-top"> 
    <div class="container"> 
     <div class="d-flex w-100 justify-content-between flex-last"> 
      <button class="navbar-toggler align-self-end mb-1" data-target="#collapsenav" data-toggle="collapse" type="button"> 
       ☰ 
      </button> 
      <div class="d-flex w-100 flex-first justify-content-between"> 
       <a class="navbar-brand" href="#home">Brand-1</a> 
       <a class="navbar-brand" href="#home">Brand-2</a> 
       <a class="navbar-brand" href="#home">Brand-3</a> 
      </div> 
     </div> 
     <div class="navbar-collapse collapse w-100" id="collapsenav"> 
      <ul class="nav navbar-nav align-items-center"> 
       <li class="nav-item active"><a class="nav-link" href="#">About</a></li> 
       <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li> 
       <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> 
       <li class="nav-item"><a class="nav-link" href="#">Resume</a></li> 
      </ul> 
     </div> 
    </div> 
</nav>

Demo

目前處於alpha 6 there is a bug，使一個container內導航欄在小屏幕上縮小寬度。這將在beta版中修復，但在那之前你只需要一個小小的CSS來保持內部容器的全部寬度。

@media (max-width:767px) { 
    .container { 
     width: 100%; 
     margin-left: 0; 
     margin-right: 0; 
    } 
}

來源

2017-04-07 11:31:35 ZimSystem

完美的，我認爲是最後的答案您的回覆，因爲它是非常乾淨的，沒有的HTML代碼的任何重複。它解決了我很好的問題。非常感謝，歡呼！ @ZimSystem –

執行3個品牌紛紛在右邊？

自舉，可以對品牌僅通過移動按鈕並導航列表內容的div之間的導航品牌鏈接很容易離開。這將使您的3個品牌保持原位，不會被推倒。

<body id="page-top"> 
<nav class="navbar navbar-dark bg-primary navbar-fixed-top"> 
    <div class="container"> 
<button class="navbar-toggler hidden-md-up pull-xs-right" data-target="#collapsenav" data-toggle="collapse" type="button"> 
      ☰ 
     </button> 
    //move brand items here 
    <a class="navbar-brand" href="#home">Brand-1</a> 
    <a class="navbar-brand" href="#home">Brand-2</a> 
    <a class="navbar-brand" href="#home">Brand-3</a> 
    <div class="row"> 
     <div class="col-md-6 col-sm-12 col-xs-12"> 
      <div class="navbar-toggleable-sm collapse text-xs-center" id="collapsenav"> 
       <ul class="nav navbar-nav"> 
        <li class="nav-item"><a class="nav-link" href="#">About</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Resume</a></li> 
       </ul> 
      </div> 
     </div> 
    //delete these out 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-1</a> 
     </div> 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-2</a> 
     </div> 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-3</a> 
     </div> 
    </div> 
    </div> 
</nav> 
</body>

如果你的三個品牌都在右邊，那麼我認爲你將不得不做一些引導CSS工作有品牌顯示在大屏幕上，你在你的代碼有它最初，然後隱藏更小的屏幕並顯示上面添加的代碼。例如：

<body id="page-top"> 
<nav class="navbar navbar-dark bg-primary navbar-fixed-top"> 
    <div class="container"> 
<button class="navbar-toggler hidden-md-up pull-xs-right" data-target="#collapsenav" data-toggle="collapse" type="button"> 
      ☰ 
     </button> 
     //show these here on small screens 
     <a class="navbar-brand" href="#home">Brand-1</a> 
     <a class="navbar-brand" href="#home">Brand-2</a> 
     <a class="navbar-brand" href="#home">Brand-3</a> 
     <div class="row"> 
      <div class="col-md-6 col-sm-12 col-xs-12"> 
      <div class="navbar-toggleable-sm collapse text-xs-center" id="collapsenav"> 
       <ul class="nav navbar-nav"> 
        <li class="nav-item"><a class="nav-link" href="#">About</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Resume</a></li> 
       </ul> 
      </div> 
     </div> 
    //show these below on large screens 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-1</a> 
     </div> 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-2</a> 
     </div> 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-3</a> 
     </div> 
    </div>

我對編碼還比較陌生，所以我希望這有助於！

來源

2017-04-06 20:24:24 Meg

感謝您的提示，但不能認爲它是一個全面的解決方案。但你的調整/解決方法也是欣賞。謝謝你，歡呼！ –

引導4導航欄倒塌與右列中的元素

回答

相關問題