我需要格式化引導

喜的導航欄菜單中的幫助，這是我使用的代碼

<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保證金列表（因爲這將破壞引導程序的移動響應性和崩潰屬性）..相反，我想要使用引導行和列函數來做到這一點，但由於即時通訊新的它不能使它..任何形式的幫助真的感激..在此先感謝..

來源

2016-09-08 abby-m7

你可以分享的CSS代碼？ under style.css的香港專業教育學院 – Gowtham

肯定的是，我剛用bootstrap.min.css和style.css中...定義的類= 「menu_style」 ......這裏是代碼：.menu_style { FONT-FAMILY：宋體; font-color：＃000000; font-size：15px; } –

分享您的完整代碼或鏈接的jsfiddle。 – JeetDaloneboy

我查過了，也許這會有所幫助。

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

鏈接到文章： Center content in responsive bootstrap navbar

來源

2016-09-08 09:32:39

謝謝你的迴應..祝你有個美好的一天！ –

你必須採取的導航欄的頂部一行。根據你的問題

<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。

來源

2016-09-08 09:34:21

感謝你的反應..我想你的代碼，但它給我的菜單中的下一行..而我在同一行標誌的希望......截圖圖片鏈接http://myofficwork123.netne.net/ –

你仍然可以使用margin屬性來實現這一點，但是如果你想消除更改的餘地收縮的菜單欄，您可以使用CSS媒體查詢更改的邊距回零。當然，會有一定的屏幕尺寸，導航欄變爲可摺疊的導航欄，因此您需要媒體查詢。

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

    }

來源

2016-09-08 09:36:12

我需要格式化引導

回答

相關問題