Question

所以我使用bootstrap 3并且我似乎无法将我的最小导航菜单放在col-md-1中以允许我的其他列在页面顶部对齐。它似乎抵消它并将其他列发送到它下面。我该如何解决？？？下面是html和我完整编码的链接。 https://jsfiddle.net/Digigod/9qncuhog/2/

  <div class="container">
  <div class="row">
  <div class="col-xs-1 col-md-1">
         <div class="navbar navbar-fixed-left navbar-minimal animate" role="navigation">
    <div class="navbar-toggler animate">
        <span class="glyphicon glyphicon-align-justify"></span>
    </div>
    <ul class="navbar-menu animate">
        <li>
            <a class="menu_nav" href="#about-us" class="animate">
                <span class="desc animate"> HOME </span>
                <span class="glyphicon glyphicon-home"></span>

            </a>
        </li>
        <li>
            <a class="menu_nav" href="#blog" class="animate">
                <span class="desc animate"> Artist </span>
                <span class="glyphicon glyphicon-user"></span>
            </a>
        </li>
        <li>
            <a class="menu_nav" href="#contact-us" class="animate">
                <span class="desc animate"> Music </span>
                <span class="glyphicon glyphicon-cd"></span>
            </a>
        </li>
        <li>
            <a class="menu_nav" href="#contact-us" class="animate">
                <span class="desc animate"> Videos </span>
                <span class="glyphicon glyphicon-facetime-video"></span>
            </a>
        </li>
        <li>
            <a class="menu_nav" href="#contact-us" class="animate">
                <span class="desc animate"> Services </span>
                <span class="glyphicon glyphicon-shopping-cart"></span>
            </a>
        </li>
        <li>
            <a class="menu_nav" href="#contact-us" class="animate">
                <span class="desc animate"> Contact Us </span>
                <span class="glyphicon glyphicon-earphone"></span>
            </a>
        </li>
    </ul>
</div>
</div>
</div>

<div class="col-xs-7 col-md-7"><b>FOLLOW US:</b>
<i class="fa fa-twitter"></i> 
<i class="fa fa-facebook-official"></i> 
<i class="fa fa-google-plus-square"></i></div>

<div class="col-xs-2 col-md-2"></div> 

<div class="col-xs-2 col-md-2"></div>
</div>

Answer 1

您的.col-xs-7列也必须位于.container和.row内。

如何将Bootstrap导航栏宽度更改为适合Column-md-1

1 个答案: