html - Bootstrap 下拉，每行有两个 anchor 链接未对齐

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 片段之后:

.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:这只是更改了显示属性，因此两个标签都在同一行上。

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