Question

如何在bootstrap中构建嵌套的可禁止警报。

我们的想法是让一个盒子（一个过滤器）里面有盒子（filter-criteria），并让用户单击十字架来删除整个过滤器标准的过滤器。

*编辑*

根据反馈，我想出了以下内容：

<div class="alert alert-info NewsAudienceFilterContainer col-md-12 " id="0" style="">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
    <span class="filter-option">
        <button class="btn btn-info filter" type="button" data-dismiss="alert">
            Werkjaar : 2016 - 2017
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
        </button>
    </span>

    <span class="filter-option">
        <button class="btn btn-info filter" type="button" data-dismiss="alert">
            Activiteit : Piano
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
        </button>
    </span>

    <span class="filter-option">
        <button class="btn btn-info filter" type="button" data-dismiss="alert">
            Lesgever / Coach : Piano Heleen
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
        </button>
    </span>

    <span class="filter-option">
        <button class="btn btn-info filter" type="button" data-dismiss="alert">
            Dag : Maandag
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
        </button>
    </span>
</div>

问题：点击过滤器选项的X时，整个过滤器都会消失。

与样本比较。我使用<span>代替<div>。那是什么原因吗？

*编辑2 * 功能解决方法。在“过滤选项”中添加一个ID，并在按钮上使用“数据目标”属性。

<span class="filter-option" id="DayOfWeekFilter242375497">
    <button class="btn btn-info filter" type="button" data-dismiss="alert" data-target="#DayOfWeekFilter242375497">
        Dag : Woensdag
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
    </button>
    <input name="NewsAudienceFilter.DayOfWeek" type="hidden" value="Wednesday">
</span>

Answer 1

我已经基于bootstrap框架为你创建了一个fiddle，正如你所要求的那样。

<强> HTML

<div class="panel panel-default">
  <div class="panel-body">
    Example
    <div class="panel panel-default">
      <button type="button" class="close" id="close-filter-box" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div class="panel-heading">Filter box with filter-criteria</div>
      <div class="panel-body">
        <div class="filter-option">
          <button class="btn btn-info filter" type="button" data-dismiss="alert">
            Filter 1 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
          </button>
        </div>
        <div class="filter-option">
          <button class="btn btn-info filter" type="button" data-dismiss="alert">
            Filter 2 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
          </button>
        </div>
        <div class="filter-option">
          <button class="btn btn-info filter" type="button" data-dismiss="alert">
            Filter 3 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
          </button>
        </div>
        <div class="filter-option">
          <button class="btn btn-info filter" type="button" data-dismiss="alert">
            Filter 4 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
          </button>
        </div>
        <div class="filter-option">
          <button class="btn btn-info filter" type="button" data-dismiss="alert">
            Filter 5 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<强> CSS

#close-filter-box {
  margin: 10px;
}

.filter {
  margin: 5px;
}

.filter .glyphicon-remove {
  vertical-align: bottom;
  margin-bottom: 4px;
  opacity: .7;
}

.filter .glyphicon-remove:hover {
  opacity: 1.0;
  color: #fff;
}

我希望这接近你试图实现的目标。

Answer 2

运行解决方法。在“filter-option”中添加一个id，并在按钮上使用“data-target”属性。

<span class="filter-option" id="DayOfWeekFilter242375497">
    <button class="btn btn-info filter" type="button" data-dismiss="alert" data-target="#DayOfWeekFilter242375497">
        Dag : Woensdag
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
    </button>
    <input name="NewsAudienceFilter.DayOfWeek" type="hidden" value="Wednesday">
</span>

Bootstrap嵌套的不允许警报

2 个答案: