我正在尝试使用Twitter Bootstrap 3和Font Awesome 4制作一个可忽略的通知下拉列表。我无法获得一行中的对齐链接，我尝试过：
<i>元素的链接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]
答案 0 :(得分：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>标记。
答案 1 :(得分：2)
你可以用CSS做到这一点，因为我怀疑任何内置的Bootstrap类都能实现这一点。以下是两个示例，具体取决于您最终希望如何看待它。
这两个示例都使用添加的类，默认情况下不会更改，因此默认下拉列表仍然可以在整个应用程序中使用，所有添加CSS都可以在此注释的末尾找到： / *添加了通知的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：这只是更改了display属性，因此两个标记都在同一行。
/* 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>