css：在同一行中設置導航的所有元素

我有一個問題，在同一行中設置header的所有元素。下面是代碼：css：在同一行中設置導航的所有元素

<nav class="navbar navbar-default header navbar-fixed-top"> 
      <div class="col-md-12 nav-wrapper"> 
      <div class="row"> 
        <div class="navbar-header"> 
         <div class="col-md-3"> 
           <div class="opener-left-menu is-open"> 
            <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> 
           </div> 
           <a href="#" class="navbar-brand"> <b>Consultation Web</b></a> 
         </div> 
         <div class="col-md-3"> 
          <ul class="nav navbar-nav navbar-right user-nav"> 
           <li class="user-name"><span>User name</span></li> 
           <li class="dropdown avatar-dropdown"> 
            <img src="./app/shared/img/avatar.jpg" 
             class="img-circle avatar" alt="user name" data-toggle="dropdown" aria-haspopup="true" 
             aria-expanded="true" /> 
           </li> 
          </ul> 
         </div> 
        </div> 
       </div> 
      </div> 
     </nav>

我曾嘗試於環繞row類的元素。我也給了這兩個元素class="col-md-3"。所以，我希望我只使用一半的可用列。 不幸的是，img標籤總是轉到下一行。我想只有一行中的所有元素。我該如何解決它？

這裏是我使用的CSS：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> 
    <link rel="stylesheet" href="./app/shared/css/style.css"> 
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

我相信，style.css是得到正確加載。

來源

2016-10-01 Kamyar Parastesh

您是否嘗試增加導航欄的大小？可能在3/12列中沒有足夠的空間。 –

你在你的''標籤中添加了'bootstrap.min.css'，'jquery.min.js'和'bootstrap.min.js'嗎？ – Shaggy

也把'nav'放在''行中。 – SAM

謝謝大家。我忘了添加

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

來源

2016-10-01 08:25:08

css：在同一行中設置導航的所有元素

回答

相關問題