ブートストラップナビピルメニューカスタムサイズ幅

Question

メニューカテゴリの長さに関係なく、カスタム固定サイズを設定するために、右メニュー（ナビゲーションピル）を編集したい...たとえば、このメニューを150pxコードは次のとおりです。http://www.bootply.com/3BzZ4kQyuT

私は次のようになりたい：

バッジはメニューの左側にする必要があり、そしてすべてのボタンが同じ大きさを持っている必要があります。

Answer 1

だけの人が簡単な方法であなたを助けることができるので、あなたは、あなたのコードを共有することができ、あなたの数badgeの

.thumbnail.product { 
 
    position: relative; 
 
    text-align: center; 
 
    } 
 
    .thumbnail.product .label { 
 
    display: inline-block; 
 
    margin-bottom: 5px; 
 
    } 
 
    .thumbnail.product .product-price { 
 
    display: inline-block; 
 
    border: 1px solid transparent; 
 
    padding: 5px 10px; 
 
    cursor: pointer; 
 
    } 
 
    .thumbnail.product .product-price:hover { 
 
    border: 1px solid #CCC; 
 
    border-radius: 5px; 
 
    } 
 
    .thumbnail.product .product-price:active { 
 
    background-color: #EEE; 
 
    } 
 
    div.thumbnail{ 
 
    padding:0px; 
 
    } 
 

 
.thumbnailheader h3, .thumbnail p 
 
{ 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     <ul class="nav nav-pills"> 
 

 
      <li class="pull-left"> 
 
       <a href="/"><img src="/static/logo.png" alt=""></a> 
 
      </li> 
 

 
     
 

 
     
 
     <li class="pull-right" style="margin-left: 20px;"> 
 
      <div class="dropdown"> 
 
      <a href="#" class="btn dropdown-toggle" id="accountDropdownMenu" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <strong>admin <span class="caret"></span></strong></a> 
 
      <ul class="dropdown-menu dropdown-menu-right" role="menu"> 
 
       <li class="dropdown-header"> <span class="label label-success"><i class="glyphicon glyphicon-star"></i> PREMIUM MEMBER</span></li> 
 
       <li class="divider"></li> 
 
      <li><a role="menuitem" href="/account/sell/products.html"><i class="glyphicon glyphicon-record"></i> Products</a></li> 
 
       <li><a role="menuitem" href="/account/messages.html"><i class="glyphicon glyphicon-envelope"></i> Messages <span class="badge badge-success">0</span></a></li> 
 

 
       <li class="dropdown dropdown-submenu"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-star"></i> Favorites</a> 
 
       <ul class="dropdown-menu dropdown-menu-left"> 
 
        <li><a role="menuitem" href="/account/favorite-items.html">Items <span class="badge badge-success">0</span></a></li> 
 
        <li><a role="menuitem" href="/account/favorite-searches.html">Search <span class="badge badge-success">0</span></a></li> 
 
       </ul> 
 
       </li> 
 
       
 
       <li class="divider"></li> 
 
       <li><a role="menuitem" href="/account"><i class="glyphicon glyphicon-dashboard"></i> Dashboard</a></li> 
 
       
 
       <li class="divider"></li> 
 
       <li><a role="menuitem" href="/admin/"><i class="glyphicon glyphicon-cog"></i> Admin panel</a></li> 
 
       
 
       <li class="divider"></li> 
 
       <li><a role="menuitem" href="/logout.html"><i class="glyphicon glyphicon-log-out"></i> Logout</a></li> 
 
      </ul> 
 
      </div> 
 

 
     </li> 
 
     
 
     
 
     
 
      <li class="pull-right" style="margin-left: 20px;"><a role="menuitem" href="/account/add-product.html">Add product</a></li> 
 
     
 

 
     </ul> 
 
    </div></div> 
 
    
 

 
<div class="row"> 
 
    <div class="page-header"> 
 

 
    <div class="pull-right"> 
 
     <form action="/" method="GET"> 
 
     
 
     <input type="text" name="q" placeholder="Search market..." size="20" value=""> 
 
     <button class="btn btn-xs btn-primary" type="submit">Search</button> 
 
     </form> 
 

 
     <form action="" method="GET"> 
 
     
 
     
 
     Sort by: 
 
     <select name="sort"> 
 
      
 
      <option value="-date">Date added</option> 
 
      
 
      <option value="price">Lower price</option> 
 
      
 
      <option value="-price">Higher price</option> 
 
      
 
      <option value="-orders">Best Sellers</option> 
 
      
 
     </select> 
 
     <button class="btn btn-xs btn-primary" type="submit">Apply</button> 
 
     </form> 
 
    </div> 
 

 
    <h1>New 
 
     </h1> 
 

 

 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-2"> 
 
    <ul class="nav nav-pills nav-stacked"> 
 
     
 
     <li> 
 
      <a href="/category/app-1.html">app 
 
      <span class="badge pull-right"> 
 
      
 
       1 
 
      
 
      </span> 
 
      </a> 
 
     </li> 
 
     
 
     
 
     <li> 
 
      <a href="/category/software-2.html">software 
 
      <span class="badge pull-right"> 
 
      
 
       1 
 
      
 
      </span> 
 
      </a> 
 
     </li> 
 
     
 
     
 
     <li> 
 
      <a href="/category/voucher-3.html">voucher 
 
      <span class="badge pull-right"> 
 
      
 
       0 
 
      
 
      </span> 
 
      </a> 
 
     </li> 
 
     
 
     
 
    </ul> 
 
    </div> 
 
    <div class="col-md-10"> 
 
    
 

 
    <div class="row"> 
 
    
 
    <div class="col-sm-4 col-md-4 col-lg-3"> 
 

 

 
     <div class="thumbnail product"> 
 
<h5><a href="&#10; &#10;  /product/product-4-24820861725.html&#10; &#10;">product 4</a></h5> 
 
     <a href="&#10; &#10;  /product/product-4-24820861725.html&#10; &#10;"> 
 
    
 
    <p> 
 
    
 
     <img src="/static/uploads/16/thumb.02556996-product-4.jpg"> 
 
    
 
    </p> 
 
    
 
</a> 
 

 
       <span class="label label-info"><i class="glyphicon glyphicon-tag"></i>app</span> 
 
     
 
     
 
     <span class="label label-info"><i class="glyphicon glyphicon-user"></i> admin</span> 
 

 
<div class="panel-footer"> 
 
1.00 $ 
 
</div> 
 

 
     </div> 
 

 
    </div> 
 

 
    
 
    <div class="col-sm-4 col-md-4 col-lg-3"> 
 

 

 
     <div class="thumbnail product"> 
 
<h5><a href="&#10; &#10;  /product/product-111-22234646298.html&#10; &#10;">product 111</a></h5> 
 
     <a href="&#10; &#10;  /product/product-111-22234646298.html&#10; &#10;"> 
 
    
 
    <p> 
 
    
 
     <img src="/static/uploads/15/thumb.91861739-product-111.jpg"> 
 
    
 
    </p> 
 
    
 
</a> 
 

 
       <span class="label label-info"><i class="glyphicon glyphicon-tag"></i>software</span> 
 
     
 
     
 
     <span class="label label-info"><i class="glyphicon glyphicon-user"></i> admin</span> 
 

 
<div class="panel-footer"> 
 
1.00 $ 
 
</div> 
 

 
     </div> 
 

 
    </div> 
 

 
    
 
    </div> 
 

 
    
 
    <nav> 
 
    <ul class="pagination"> 
 
     
 
     
 
    </ul> 
 
    </nav> 
 

 
    </div> 
 
</div> 
 

 

 
    <br><br> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     <div> © 2016 
 
      <a href="/">selfmarket.net</a>/
 
      <a href="/atom.xml">RSS Feed</a>/
 
      <a href="/static/sitemap.xml">sitemap.xml</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>