Question

我是bootstrap的新手（虽然我可以从头开始做所有的CSS - 尽管不一定非常有说服力）。据我所知，bootstrap更像是网站的设计理念 - 以twitter的12列网格系统为中心 - 恰好有一个CSS库和一些JS来实现小功能（例如折叠警报或制表符）。我可能错了，请纠正我，如果是这样的话。

我想在bootstrap中做些什么，但我不知道如何处理它。我想用以下标准制作一个可折叠的嵌套列表：

无论结构如何，它都适用于任意数量的嵌套
应该有一个V形指示符（向右或向下），指示列表是否在该级别折叠
他们应该是列表中每个项目的复选框

我想澄清一下，上面列出的是说明我想做的目标。其中一些功能在bootstrap之外，仅在此处提及，因为它们会影响布局。我不是要求一个完整的工作模型，而是在尝试使用尽可能多的bootstrap内置功能时如何处理它。

让我们开始吧：

<div id="nested-list" class="container-fluid"> 
    <!-- the nested list goes here -->
</div>

我解决这个问题的方法是考虑我想要的每一行（项目或嵌套列表），这是 - 按此顺序 - 复选框，雪佛龙，（多行）文本的空间。

起初我考虑使用list-group但是注意到嵌套时CSS没有任何额外的功能。我认为纠正这个问题的麻烦不值得。所以我选择row：

<div class="row"><!-- item goes here --></div>

现在我想要包括三件事，其中两件非常小。最初我考虑过大小为1的列，但这奇怪地破坏了CSS并将文本放在复选框和V形符号下面。所以我决定2号，2号和8号都没问题。另外，我选择省略大小（例如sm，md等），因为我总是想要同一行上的复选框，V形符号和文本。如果有什么必须放弃空间，它应该是文本，它应该通过增加其垂直大小来实现。

切线，我希望很明显我希望复选框和V形符号对齐（在各自的级别）。

鉴于上述陈述，我决定：

<div class="col-2"><input type="checkbox" name="" value=""></div>
<div class="col-2"><i class=""fa fa-caret-right></i></div> <!-- I use font awesome here as I could not readily find how to make a chevron in bootstrap v4 -->
<div class="col-8"><div id="outer-1"> text goes here </div></div>

理想情况下单击V形或文本会切换嵌套项目，这使我认为我应该在文本上使用css样式::before来获取V形符号，或者将两者封装在一个元素中，例如按钮。但是，这可能会弄乱间距。

接下来需要的是嵌套内容，所以在#outer-1我们有：

<div class="container-fluid">
  <div class="row">
    <div class="col-2"><input type="checkbox" name="" value=""></div>
    <div class="col-2"><i class=""fa fa-caret-right></i></div>
    <div class="col-8"><div id="inner-1"> text goes here </div></div>
  </div>
</div>

然后只需要我们添加collapse切换（理想情况下是雪佛龙图标或动画旋转的变化）。我也继续把它嵌套了。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<div id="nested-list" class="container-fluid">
  <!-- the nested list goes here -->
  <div class="row">
    <!-- item goes here -->
    <div class="col-2"><input type="checkbox" name="" value=""></div>
    <div class="col-2" data-toggle="collapse" href="#inner-item-list-1"><i class="fa fa-caret-right"></i></div>
    <!-- I use font awesome here as I could not readily find how to make a chevron in bootstrap v4 -->
    <div class="col-8">
      <div id="outer-1"> outer 1
        <div class="container-fluid" id="inner-item-list-1">

          <div class="row" id="inner-item-1" class="collapse">
            <div class="col-2"><input type="checkbox" name="" value=""></div>
            <div class="col-2"><i class="fa fa-caret-right"></i></div>
            <div class="col-8">
              <div id="inner-1"> inner item 1</div>
            </div>
          </div>

          <div class="row" id="inner-item-2" class="collapse">
            <div class="col-2"><input type="checkbox" name="" value=""></div>
            <div class="col-2" data-toggle="collapse" href="#inner-item-2-list-1"><i class="fa fa-caret-right"></i></div>
            <div class="col-8">
              <div id="inner-2"> inner item 2
                <div class="container-fluid" id="inner-item-2-list-1">

                  <div class="row" id="inner-item-2-1" class="collapse">
                    <div class="col-2"><input type="checkbox" name="" value=""></div>
                    <div class="col-2"><i class="fa fa-caret-right"></i></div>
                    <div class="col-8">
                      <div id="inner-1"> inner item 1</div>
                    </div>
                  </div>

                  <div class="row" id="inner-item-2-2" class="collapse">
                    <div class="col-2"><input type="checkbox" name="" value=""></div>
                    <div class="col-2"><i class="fa fa-caret-right"></i></div>
                    <div class="col-8">
                      <div id="inner-2"> inner item 2</div>
                    </div>
                  </div>


                </div>
              </div>
            </div>
          </div>


        </div>
      </div>
    </div>
  </div>
</div>

正如你所看到的那样，这会带来一些技术上有效的东西，尽管并不像预期的那样。必须单击两次才能使事情崩溃（我可能已经把它放在了一个不应该属于的类中），它会出现故障，并且这种缩进对于几个嵌套列表来说太极端了。

所以上面是我如何使用bootstrap实现嵌套的可折叠列表。如果我从头开始实现它，我就不会这样做。

对于那些比我更熟练的人，请告诉我如何做到最好。

Bootstrap v4：带有复选框和V形符号的可折叠嵌套列表

0 个答案: