引導下拉與未對齊每行有兩個錨鏈接

Question

我試圖做一個dismissable通知下拉列表與Twitter的引導3和字體真棒4.我不能得到的鏈接，在一行排列，我曾嘗試：

1. 包圍它們在一個div
2. 第一連桿具有在其內部的<i>元件
3. 施加display:inline到鏈接

<ul class="dropdown-menu"> 
 
    <li> 
 
    <a href="/demo" class="pull-left">your friend arrived </a> <a href="" class="pull-right fa fa-remove" on-click="deleteNotification()"></a> 
 
    <a href="/demo" class="pull-left">small notification </a> <a href="" class="pull-right fa fa-remove" on-click="deleteNotification()"></a> 
 
    <a href="/demo" class="pull-left">your friend arrived big notification</a> <a href="" class="pull-right fa fa-remove" on-click="deleteNotification()"></a> 
 
    </li> 
 
</ul>

，你可以在這裏看到一個完整的例子http://www.bootply.com/66SAUtHtnv

投稿的圖像也應用這個CSS代碼段後：

.dropdown-menu>li>a {clear: none;}[![enter image description here][1]][1] 

Answer 1

你可以用CSS來做到這一點，因爲我懷疑任何內置的Bootstrap類都可以實現這一點。這裏有兩個例子，取決於你最終希望如何看待。

這兩個示例都使用一個添加的類，默認不會被改變，所以默認下拉菜單仍然可以在您的應用程序中使用，並且所有添加的CSS可以在此評論的末尾找到：/* Added用於通知的CSS。 */

示例1：這是一個精煉的版本，它爲刪除圖標創建空間，並始終將它放在最右邊，因此無論鏈接文本的長度如何，所有圖標都會垂直對齊。

/* Sticky footer styles 
 
-------------------------------------------------- */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    /* The html and body elements cannot have any padding or margin. */ 
 
} 
 
/* Wrapper for page content to push down footer */ 
 

 
#wrap { 
 
    min-height: 100%; 
 
    height: auto !important; 
 
    height: 100%; 
 
    /* Negative indent footer by its height */ 
 
    margin: 0 auto -60px; 
 
    /* Pad bottom by footer height */ 
 
    padding: 0 0 60px; 
 
} 
 
/* Set the fixed height of the footer here */ 
 

 
#footer { 
 
    height: 60px; 
 
    background-color: #f5f5f5; 
 
} 
 
/* Custom page CSS 
 
-------------------------------------------------- */ 
 

 
/* Not required for template or sticky footer method. */ 
 

 
#wrap > .container { 
 
    padding: 60px 15px 0; 
 
} 
 
.container .credit { 
 
    margin: 20px 0; 
 
} 
 
#footer > .container { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
} 
 
code { 
 
    font-size: 80%; 
 
} 
 
/* Added CSS for Notifications. */ 
 

 
.dropdown-remove li { 
 
    width: 100%; 
 
    margin-right: 20px; 
 
} 
 
.dropdown-remove li .remove:hover, 
 
.dropdown-remove li .remove:focus { 
 
    background: none; 
 
    color: red; 
 
} 
 
.remove { 
 
    margin-top: -26px; 
 
    float: right; 
 
    width: 10px; 
 
    margin-right: 5px; 
 
} 
 
@media (max-width: 767px) { 
 
    .dropdown-remove li { 
 
    padding-right: 15px; 
 
    } 
 
    .remove { 
 
    margin-top: -30px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="wrap"> 
 
    <div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <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> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Project name</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#about">About</a> 
 
      </li> 
 
      <li><a href="#contact">Contact</a> 
 
      </li> 
 
      <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu dropdown-remove"> 
 
       <li><a href="/demo">your friend arrive</a> 
 
       <a class="remove" href="/remove" on-click="deleteNotification()"><span class="fa fa-remove"></span></a> 
 
       </li> 
 
       <li><a href="/demo">small notification</a> 
 
       <a class="remove" href="/remove" on-click="deleteNotification()"><span class="fa fa-remove"></span></a> 
 
       </li> 
 
       <li><a href="/demo">your friend arrived big notification</a> 
 
       <a class="remove" href="/remove" on-click="deleteNotification()"><span class="fa fa-remove"></span></a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

實施例2：此簡單地改變顯示屬性，以便既標籤是在同一條線上。

/* Sticky footer styles 
 
-------------------------------------------------- */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    /* The html and body elements cannot have any padding or margin. */ 
 
} 
 
/* Wrapper for page content to push down footer */ 
 

 
#wrap { 
 
    min-height: 100%; 
 
    height: auto !important; 
 
    height: 100%; 
 
    /* Negative indent footer by its height */ 
 
    margin: 0 auto -60px; 
 
    /* Pad bottom by footer height */ 
 
    padding: 0 0 60px; 
 
} 
 
/* Set the fixed height of the footer here */ 
 

 
#footer { 
 
    height: 60px; 
 
    background-color: #f5f5f5; 
 
} 
 
/* Custom page CSS 
 
-------------------------------------------------- */ 
 

 
/* Not required for template or sticky footer method. */ 
 

 
#wrap > .container { 
 
    padding: 60px 15px 0; 
 
} 
 
.container .credit { 
 
    margin: 20px 0; 
 
} 
 
#footer > .container { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
} 
 
code { 
 
    font-size: 80%; 
 
} 
 
/* Added CSS for Notifications. */ 
 

 
.dropdown-remove li .remove:hover, 
 
.dropdown-remove li .remove:focus { 
 
    background: none; 
 
    color: red; 
 
} 
 

 
.dropdown .dropdown-remove li a { 
 
    display: table-cell; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div id="wrap"> 
 
    <div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <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> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Project name</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#about">About</a> 
 
      </li> 
 
      <li><a href="#contact">Contact</a> 
 
      </li> 
 
      <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu dropdown-remove"> 
 
       <li><a href="/demo">your friend arrive</a> 
 
       <a class="remove" href="/remove" on-click="deleteNotification()"><span class="fa fa-remove"></span></a> 
 
       </li> 
 
       <li><a href="/demo">small notification</a> 
 
       <a class="remove" href="/remove" on-click="deleteNotification()"><span class="fa fa-remove"></span></a> 
 
       </li> 
 
       <li><a href="/demo">your friend arrived big notification</a> 
 
       <a class="remove" href="/remove" on-click="deleteNotification()"><span class="fa fa-remove"></span></a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

給class="pull-left"爲<a>標籤。

<a href="/demo" class="pull-left">your friend arrived </a> <a href="" class="pull-right fa fa-remove" on-click="deleteNotification()"></a> 
<a href="/demo" class="pull-left">small notification </a> <a href="" class="pull-right fa fa-remove" on-click="deleteNotification()"></a> 
<a href="/demo" class="pull-left">your friend arrived big notification</a> <a href="" class="pull-right fa fa-remove" on-click="deleteNotification()"></a> 

它必須像pull-left和pull-right。並給這個CSS：

.dropdown-menu>li>a {clear: none;} 

堂妹在默認情況下，引導被清除下拉內<a>標籤。