我需要帮助格式化bootstrap

时间:2016-09-08 09:26:23

标签: html css twitter-bootstrap

my navbar

嗨,这是我用过的代码

<div class="container">
<nav class="navbar navbar-default" id="my-navbar">
        <div class="container" style="margin-left:60px; margin-right:60px;">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>
                <a href="">
                    <div class="nav navbar-nav navbar-left" style="margin-top:15px;">
                    <img src="images/logostack.gif" alt="logo">
                    </div>
                </a>
            </div>

            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav navbar-center menu_style" > <!--style="font-size:18px; margin-top:25px;"-->
                    <!-- LI STANDS FOR LIST-->
                    <li class="dropdown">
                           <a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li><a href="#">About Something</a></li>
                              <li><a href="#">Meet the Experts</a></li>
                           </ul>
                        </li>
                        <li class="dropdown">
                           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li><a href="#">Shortcomings</a></li>
                              <li><a href="#">Complications</a></li>
                              <li><a href="#">Stakeholders</a></li>
                           </ul>
                        </li>
                        <li class="dropdown">
                           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li><a href="#">Statistics </a></li>
                              <li><a href="#">Profile Patient</a></li>
                              <li><a href="#">Burden Economical</a></li>
                           </ul>
                        </li>
                        <li class="dropdown">
                           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li><a href="#">Management Approach</a></li>
                              <li><a href="#">Algorithms & Protocols</a></li>
                           </ul>
                        </li>
                        <li class="dropdown">
                           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li><a href="#">Non Critical</a></li>
                              <li><a href="#">Critical</a></li>
                           </ul>
                        </li>
                        <li class="dropdown">
                           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li><a href="#">Modules</a></li>
                              <li><a href="#">Videos </a></li>
                              <li><a href="#">Images </a></li>
                           </ul>
                        </li>
                        <li class="dropdown">
                           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li><a href="#">Post your Query</a></li>
                              <li><a href="#">Experts Council</a></li>
                           </ul>
                        </li>
                </ul>
            <!--unordered list -->


           </div>


        </div> 

我想将菜单放在徽标下面而不使用ul列表上的边距(因为这会破坏引导程序的移动响应性和崩溃属性)..相反,我想使用引导程序的行和列函数来执行此操作但是因为我刚接触它我无法做到..任何形式的帮助真的很感激..提前感谢..

3 个答案:

答案 0 :(得分:0)

我已经搜索过,也许这会有所帮助。

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

文章链接: Center content in responsive bootstrap navbar

答案 1 :(得分:0)

你必须在导航栏顶部排一行。

<div class="container">
 <img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
 <nav class="navbar navbar-default col-md-10" id="my-navbar">
      // Your navbar code
  </nav>
</div>

根据您提问的完整代码:

<div class="container">
            <img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
            <nav class="navbar navbar-default col-md-10" id="my-navbar">
            <div class="container" style="margin-left:60px; margin-right:60px;">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>

                    </button>

                </div>

                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav navbar-center menu_style" >
                        <!--style="font-size:18px; margin-top:25px;"-->
                        <!-- LI STANDS FOR LIST-->
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">About Something</a>
                                </li>
                                <li>
                                    <a href="#">Meet the Experts</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Shortcomings</a>
                                </li>
                                <li>
                                    <a href="#">Complications</a>
                                </li>
                                <li>
                                    <a href="#">Stakeholders</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Statistics </a>
                                </li>
                                <li>
                                    <a href="#">Profile Patient</a>
                                </li>
                                <li>
                                    <a href="#">Burden Economical</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Management Approach</a>
                                </li>
                                <li>
                                    <a href="#">Algorithms & Protocols</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Non Critical</a>
                                </li>
                                <li>
                                    <a href="#">Critical</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Modules</a>
                                </li>
                                <li>
                                    <a href="#">Videos </a>
                                </li>
                                <li>
                                    <a href="#">Images </a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Post your Query</a>
                                </li>
                                <li>
                                    <a href="#">Experts Council</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <!--unordered list -->

                </div>

            </div>
        </nav>

        </div>

您必须了解Bootstrap Grid

答案 2 :(得分:0)

您仍然可以使用margin属性来实现此目的,但是如果您想要消除折叠菜单栏的更改边距,则可以使用CSS Media查询将边距更改回零。当然,会有一定的屏幕尺寸,导航栏会更改为可折叠的导航栏,因此您需要媒体查询。

  @media only screen and (max-width:--px)
    {
        //your nav-bar code goes here

    }