Bootstrap-按钮下拉菜单中的多列布局

时间：2018-07-26 21:46:16

标签： twitter-bootstrap twitter-bootstrap-3

我有一个简单的按钮下拉列表。我需要将下拉菜单中的每一行分成三列，以便在每行上放置一个编辑和删除图标（摘录显示的内容比我能解释的要好）

我很难找到最好的方法来做到这一点。我想实现这一目标的唯一方法是在li元素上使用col- *类，但是由于该项目列表是动态生成的，因此这不是一个很好的解决方案，因为它将需要多个循环才能生成。 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="form-group">
    <label class="control-label" style="display:block">Sales Tax</label>
      <div class="btn-group btn-block">
        <button type="button" class="btn btn-default dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                5.795% <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" id="tax_rate_dropdown">
                <li>
                    <a href="#">7.5%</a>
                    <button style="background-color: transparent;" type="button" class="btn">
                        <i class="far fa-edit text-primary"></i>
                    </button>
                    <button style="background-color: transparent;" type="button" class="btn">
                        <i class="far fa-trash-alt text-danger"></i>
                    </button>
                </li>
                <li>
                    <a href="#">8.5%</a>
                    <button style="background-color: transparent;" type="button" class="btn">
                        <i class="far fa-edit text-primary"></i>
                    </button>
                    <button style="background-color: transparent;" type="button" class="btn">
                        <i class="far fa-trash-alt text-danger"></i>
                    </button>
                </li>
                <li>
                    <a href="#">9.5%</a>
                    <button style="background-color: transparent;" type="button" class="btn">
                        <i class="far fa-edit text-primary"></i>
                    </button>
                    <button style="background-color: transparent;" type="button" class="btn">
                        <i class="far fa-trash-alt text-danger"></i>
                    </button>
                </li>
                <li>
                    <a href="#">10.5%</a>
                    <button style="background-color: transparent;" type="button" class="btn">
                        <i class="far fa-edit text-primary"></i>
                    </button>
                    <button style="background-color: transparent;" type="button" class="btn">
                        <i class="far fa-trash-alt text-danger"></i>
                    </button>
                </li>
                <li role="separator" class="divider"></li>
                <li>
                    <button class="btn btn-primary btn-block">Create New Sales Tax</button>
                </li>
            </ul>
        </div>
    </div>

</div>

2 个答案:

答案 0 :(得分：1)

如果能够将以下CSS（插入到新的或现有的style.css文件中），则可以执行以下操作：

ul#tax_rate_dropdown.dropdown-menu>li {
  display: table;
  width: 100%; /* width of dropdown, adjust to suit your needs */
}

ul#tax_rate_dropdown.dropdown-menu>li>a,
ul#tax_rate_dropdown.dropdown-menu>li>button {
  display: table-cell;
}
ul#tax_rate_dropdown.dropdown-menu>li>button{
  float: right;
}

ul#tax_rate_dropdown.dropdown-menu>li>a {
  width: 50%; /* this is only to align the numbers, adjust to suit your needs */
}

请参见下面的演示 

ul#tax_rate_dropdown.dropdown-menu > li {
    display: table;
    width: 100%; /* width of dropdown, adjust to suit your needs */
}

ul#tax_rate_dropdown.dropdown-menu > li > a,
ul#tax_rate_dropdown.dropdown-menu > li > button {
    display: table-cell;
}

ul#tax_rate_dropdown.dropdown-menu > li > button {
    float: right;
}

ul#tax_rate_dropdown.dropdown-menu > li > a {
    text-align: left;
    vertical-align: middle;
    width: 50%; /* this is only to align the numbers, adjust to suit your needs */
}

/* reducing HTML ;) */
ul#tax_rate_dropdown.dropdown-menu > li .btn-clear {
    background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="form-group">
        <label class="control-label" style="display:block">Sales Tax</label>
        <div class="btn-group btn-block">
            <button type="button" class="btn btn-default dropdown-toggle btn-block" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                5.795% <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" id="tax_rate_dropdown">
                <li>
                    <a href="#">1%</a>
                    <button type="button" class="btn btn-clear">
                        <i class="far fa-edit text-primary"></i>
                    </button>
                    <button type="button" class="btn btn-clear">
                        <i class="far fa-trash-alt text-danger"></i>
                    </button>
                </li>
                <li>
                    <a href="#">8.5%</a>
                    <button type="button" class="btn btn-clear">
                        <i class="far fa-edit text-primary"></i>
                    </button>
                    <button type="button" class="btn btn-clear">
                        <i class="far fa-trash-alt text-danger"></i>
                    </button>
                </li>
                <li>
                    <a href="#">9.55%</a>
                    <button type="button" class="btn btn-clear">
                        <i class="far fa-edit text-primary"></i>
                    </button>
                    <button type="button" class="btn btn-clear">
                        <i class="far fa-trash-alt text-danger"></i>
                    </button>
                </li>
                <li>
                    <a href="#">10.5555555555555%</a>
                    <button type="button" class="btn btn-clear">
                        <i class="far fa-edit text-primary"></i>
                    </button>
                    <button type="button" class="btn btn-clear">
                        <i class="far fa-trash-alt text-danger"></i>
                    </button>
                </li>
                <li role="separator" class="divider"></li>
                <li>
                    <button class="btn btn-primary btn-block">Create New Sales Tax</button>
                </li>
            </ul>
        </div>
    </div>
</div>

已更新

演示中调整后的下拉宽度

答案 1 :(得分：1)

css可以满足您的需要。

在CSS下方添加到您的文件中

ul a {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

ul li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.btn {
  background-color: transparent;
}

请勿使用in-line设置样式，而应使用外部CSS。

通过删除style="background-color: transparent;"减少了253个字符 和简单的添加

.btn{
background-color: transparent;
}


ul a {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

ul li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.btn {
  background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="form-group">
    <label class="control-label" style="display:block">Sales Tax</label>
    <div class="btn-group btn-block">
      <button type="button" class="btn btn-default dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                5.795% <span class="caret"></span>
            </button>
      <ul class="dropdown-menu" id="tax_rate_dropdown">
        <li>
          <a href="#">22.97395566665565%</a>
          <button type="button" class="btn">
                        <i class="far fa-edit text-primary"></i>
                    </button>
          <button type="button" class="btn">
                        <i class="far fa-trash-alt text-danger"></i>
                    </button>
        </li>
        <li>
          <a href="#">9.99%</a>
          <button type="button" class="btn">
                        <i class="far fa-edit text-primary"></i>
                    </button>
          <button type="button" class="btn">
                        <i class="far fa-trash-alt text-danger"></i>
                    </button>
        </li>
        <li><a href="#">1%</a>
          <button type="button" class="btn">
                        <i class="far fa-edit text-primary"></i>
                    </button>
          <button type="button" class="btn">
                        <i class="far fa-trash-alt text-danger"></i>
                    </button>
        </li>
        <li role="separator" class="divider"></li>
        <li>
          <button class="btn btn-primary btn-block">Create New Sales Tax</button>
        </li>
      </ul>
    </div>
  </div>

</div>

相关问题
最新问题