響應菜單（引導） - 按鈕內聯

Question

我有兩個按鈕在我的導航欄的右側，響應菜單中的按鈕排列在他們自己之間。

是否有可能使內聯按鈕，所以這兩個按鈕在第一行的頂部。

  <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <p class="navbar-btn btn-space btn-top-space"> 
         <a href="https://url.com" target="_blank" title="Customer Payment Panel (CPP)" class="btn-sm btn-info"> 
          <span class="glyphicon glyphicon-user"></span> <strong>Customer Panel</strong> (CPP) 
         </a> 
        </p> 
       </li> 
       <li> 
        <p class="navbar-btn btn-top-space"> 
         <a href="https://url.com" target="_blank" title="Control Panel (Plesk)" class="btn-sm btn-success"> 
          <span class="glyphicon glyphicon-cog"></span> <strong>Control Panel</strong> (Plesk) 
         </a> 
        </p> 
       </li> 
      </ul> 

Answer 1

你可以嘗試這樣的。

您必須添加自定義媒體樣式。

CSS-

@media (max-width: 767px) { 
    .nav.top-nav li{ 
     display:inline-block; 
    } 
} 

的Html -

<ul class="nav top-nav navbar-nav navbar-right"> 
    <li> 
     <p class="navbar-btn btn-space btn-top-space"> 
      <a href="https://url.com" target="_blank" title="Customer Payment Panel (CPP)" class="btn-sm btn-info"> 
       <span class="glyphicon glyphicon-user"></span> <strong>Customer Panel</strong> (CPP) 
      </a> 
     </p> 
    </li> 
    <li> 
     <p class="navbar-btn btn-top-space"> 
      <a href="https://url.com" target="_blank" title="Control Panel (Plesk)" class="btn-sm btn-success"> 
       <span class="glyphicon glyphicon-cog"></span> <strong>Control Panel</strong> (Plesk) 
      </a> 
     </p> 
    </li> 
</ul> 

Answer 2

使用，這可能幫助ü

<ul class="nav navbar-nav navbar-right"> 
       <li> 
        <span class="navbar-btn btn-space btn-top-space"> 
         <a href="https://url.com" target="_blank" title="Customer Payment Panel (CPP)" class="btn-sm btn-info"> 
          <span class="glyphicon glyphicon-user"></span> <strong>Customer Panel</strong> (CPP) 
         </a> 
        </span> 
         <span class="navbar-btn btn-top-space"> 
         <a href="https://url.com" target="_blank" title="Control Panel (Plesk)" class="btn-sm btn-success"> 
          <span class="glyphicon glyphicon-cog"></span> <strong>Control Panel</strong> (Plesk) 
         </a> 
        </span> 
       </li> 
      </ul>