Bootstrap 下拉菜单，每行有两个锚链接未对齐

Question

我正在尝试使用 Twitter Bootstrap 3 和 Font Awesome 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 sn-p 之后：

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

Answer 1

您可以使用 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：这只是更改了显示属性，因此两个 a 标记位于同一行。

/* 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

为<a> 标签提供class="pull-left"。

<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> 标签。