html - 如何修改 Bootstrap 下拉按钮的设计

Question

我是前端新手。我想像这样修改 Bootstrap 下拉按钮的设计: picture

Bootstrap 下拉代码:

 <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

如何根据上图进行修改？

Answer 1

请参阅下面的代码或此 fiddle用于工作演示

.dropdown-menu>li>a{
  color: red;
      padding: 3px 10px;
}
.dropdown-menu>li>a .fa{
      margin-right: 5px;
}

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li>
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li>
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li>
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li>
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li>
  </ul>
</div>