Breadcrumb into a navbar in bootstrap 3.0.2

后端 未结 2 896
野趣味
野趣味 2021-02-08 09:32

I\'m new on Bootstrap, and i want to create a navbar with some stuff (links, dropdown...) and a breadcrumb. But i have a problem with the display: block (i think...) when i put

相关标签:
2条回答
  • 2021-02-08 09:56

    A simple float: left will do the work (margins are here to for vertical alignment) :

    .nav .breadcrumb {
        margin: 0 7px;
    }
    @media (min-width: 768px) {
        .nav .breadcrumb {
            float: left;
            margin: 7px 10px;
        }
    }
    

    enter image description here

    Updated fiddle (I also fixed your icon bug on mobile version)

    0 讨论(0)
  • 2021-02-08 10:09

    This is my solution, it works with toogle button and collapse div too:

    <nav class="navbar navbar-default" role="navigation">
        <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>
            <!-- this is my custom breadcrumb -->
            <p class="navbar-text navbar-right">
                <!-- a glyphicon as homepage -->
                <a class="navbar-link" href="#" title="homepage"><span class="glyphicon glyphicon-home icons-padding"></span></a>
                &nbsp;>&nbsp;&nbsp;
                <a class="navbar-link" href="#">Link1</a>                  
                &nbsp;>&nbsp;&nbsp;
                <a class="navbar-link" href="#">Link2</a>                  
                &nbsp;>&nbsp;&nbsp;
                <a class="navbar-link" href="#">Link3</a>                  
                &nbsp;>&nbsp;&nbsp;
                Link4
            </p>
            <!-- end -->
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">
                        <span class="glyphicon glyphicon-off icons-padding">
                        </span>
                        Exit
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    

    You need to edit css just to modify the link appeal:

    a.navbar-link {
        text-decoration: underline;
    }
    

    It works with btn too: just add, to link class, "btn btn-default btn-xs".

    0 讨论(0)
提交回复
热议问题