Pertanyaan Menu tarik turun bootstrap 3 non-kolaps di seluler


Saya mencoba untuk mendapatkan menu dropdown twitter bootstrap agar tidak kolaps dan tetap berada di jalur yang sama saat menggunakan perangkat yang lebih kecil. Inilah yang saat ini terlihat seperti:

enter image description here

Saya ingin untuk nama (dalam contoh ini John Smith) agar sejajar dengan teks Aplikasi Saya dan tombol beralih. Bagaimana saya akan mencapai hal itu?

Contoh: http://bootply.com/99326

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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" href="#">My Application</a>
        </div>
        <div>
            <ul class="nav navbar-nav navbar-right navbar-user">
                <li class="dropdown user-dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> John Smith <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
                        <li><a href="#"><i class="fa fa-envelope"></i> Inbox <span class="badge">7</span></a></li>
                        <li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="fa fa-power-off"></i> Log Out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

4
2017-12-09 04:12


asal


Jawaban:


DEMO: http://jsbin.com/eNUpufIs/2/edit?html,css,output

Saya membuat tautan demo besar sehingga Anda dapat melihatnya.

<div class="navbar navbar-default navbar-fixed-top my-custom-nav" role="navigation">

  <div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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" href="#">My Application</a>



<div class="navbar-right navbar-text cursor" data-toggle="dropdown" data-target=".user-dropdown">
<i class="fa fa-user"></i> John Smith<b class="caret"></b>
</div>         



       <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
      </div>



    <ul class="nav navbar-nav navbar-user navbar-right">
                <li class="dropdown user-dropdown">

                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
                        <li><a href="#"><i class="fa fa-envelope"></i> Inbox<span class="badge">7</span></a></li>
                        <li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="fa fa-power-off"></i> Log Out</a></li>
                    </ul>
                </li>
            </ul>


</div>
</div>

CSS:

body {padding-top:50px;}

.cursor {cursor:pointer}



/* your going to need to fiddle with the css to make the menu consistent left padding-margin */

/* consistent left padding */
 @media (max-width:767px) {
    .my-custom-nav .navbar-collapse .navbar-nav > li {padding-left:15px!important;}

    .my-custom-nav .user-dropdown > .dropdown-menu > li {padding-left:5px!important;}

}

Pastikan Anda mengujinya!


6
2017-12-09 21:15