ブートストラップナビバーのいくつかのアイテムを折りたたむのを避けてください

私は左にナビアイテム、右にソーシャル/コンタクトアイコンを持つブートストラップナビバーを作成しようとしています。私はナビアイテムを崩壊させたいが、ソーシャル/コンタクトアイテムは崩壊しないようにする。彼らはモバイルユーザーのためにクリックするべきである。ブートストラップナビバーのいくつかのアイテムを折りたたむのを避けてください

私は同様の質問に対するいくつかの回答を見てきましたが、残念ながら、Bootstrap v4は下位互換性がなく、ソリューションはもはや機能しません。

私のコードはかなり簡単です。ソーシャル/コンタクトアイテムを自分のdivに入れて、崩壊部の外に置くと面白いです。しかし、私がそれらを倒壊部に入れると、うまく整列します。しかし、彼らは崩壊する。私は望んでいない。私はフレックスパラメータをちょっと混乱させてみましたが、それは事態を悪化させるように見えました。

モバイルビューの理想的な世界では、私はソーシャル/連絡先のアイコンだけでなく、右側のハンバーガーメニューボタンを持っています。ここで

#phone-number { 
 
    padding: 0 1em; 
 
    font-weight: bold; 
 
} 
 

 
.navbar-right { 
 
    flex-direction: row; 
 
} 
 

 
@media (max-width: 767px) { 
 
    #phone-number { 
 
    display: none; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
 
    <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button> 
 
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> 
 
    <div class="navbar-nav mr-auto mt-2 mt-lg-0"> 
 
     <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a> 
 
    </div> 
 
    </div> 
 
    <div class="nav navbar-nav navbar-right"> 
 
    <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
 
    <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a> 
 
    <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
 
    <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
 
    <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
 
    </div> 
 
</nav> 
 

 
<br/><br/><br/> 
 

 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
 
    <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button> 
 
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> 
 
    <div class="navbar-nav mr-auto mt-2 mt-lg-0"> 
 
     <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a> 
 
    </div> 
 
    <div class="nav navbar-nav navbar-right"> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
 
    </div> 
 
    </div> 
 
</nav>

出典

2017-10-11 abalter

が私の答えですうまくいけば、それは私はそれがここでエラーが、その作業罰金チェックフィドルを示す理由を知らないあなたがの

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta content="width=device-width, initial-scale=1" name="viewport"> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
    <style> 
 
    .nav-colapse{float: left;flex-basis: 70% !important;} 
 
    #phone-number { 
 
     padding: 0 1em; 
 
     font-weight: bold; 
 
    } 
 
    
 
    .navbar-right { 
 
     flex-direction: row; 
 
    } 
 
    
 
    @media (max-width: 767px){ 
 
     #phone-number { 
 
     display: none; 
 
     } 
 
\t .nav-colapse{flex-basis: 100% !important;} 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
 
    <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button> 
 
    <div class="collapse navbar-collapse nav-colapse" id="navbarTogglerDemo02"> 
 
     <div class="navbar-nav mt-2 mt-lg-0"> 
 
     <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a> 
 
     </div> 
 
    </div> 
 
    <div class="nav navbar-nav navbar-right nav-social"> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
 
    </div> 
 
    </nav> 
 

 
<br/><br/><br/> 
 

 
    
 
    </nav> 
 
</body> 
 
</html>

ありがとう助け

  example here[https://jsfiddle.net/radiantahmed/q2yysw7u/][1]

出典

2017-10-11 05:50:36

は、ボタンの後nav navbar-nav navbar-rightを追加し、#navbarTogglerDemo02

の作業フィドルhttps://jsfiddle.net/j2pwtj5x/

<style> 
 
    #phone-number { 
 
     padding: 0 1em; 
 
     font-weight: bold; 
 
    } 
 
    
 
    .navbar-right { 
 
     flex-direction: row; 
 
    } 
 
    
 
    @media (max-width: 767px){ 
 
     #phone-number { 
 
     display: none; 
 
     } 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
 
    <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button> 
 
    <div class="nav navbar-nav navbar-right"> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> 
 
     <div class="navbar-nav mr-auto mt-2 mt-lg-0"> 
 
     <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a> 
 
     </div> 
 
    </div> 
 
    
 
    </nav> 
 

 
<br/><br/><br/> 
 

 
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
 
    <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button> 
 
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> 
 
     <div class="navbar-nav mr-auto mt-2 mt-lg-0"> 
 
     <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a> 
 
     </div> 
 
     <div class="nav navbar-nav navbar-right"> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
 
     </div> 
 
    </div> 
 
    </nav>

出典

2017-10-11 05:59:06 Znaneswar

ブートストラップナビバーのいくつかのアイテムを折りたたむのを避けてください

答えて

関連する問題