在 adminbsb 卡上使用引导脚手架的正确方法是什么

Question

我目前正在编写一个 DJANGO 应用程序，我在其中提供了一个 adminbsb 卡片列表，并希望提供有关卡片标题的更多信息。尽管如此，如果我尝试将元素浮动到标题中，它并没有遵循规则，我把这个：

<section class="content">
    <div class="container-fluid">
        
 some script here
        

    <div class="row-fluid">
        <div class="span12">
            Fluid 12
            <div class="row-fluid">
                <div class="span6">
                    Fluid 6
                    <div class="row-fluid">
                        <div class="span6">Fluid 6</div>
                        <div class="span6">Fluid 6</div>
                    </div>
                </div>
                <div class="span6">Fluid 6</div>
            </div>
        </div>
    </div>



    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card">

            <div class="bg-green row-fluid inline-group">
                <div class="row-fluid">
                    <div class="span12">
                        Fluid 12
                        <div class="row-fluid">
                            <div class="span6">
                                Fluid 6
                                <div class="row-fluid">
                                    <div class="span6">Fluid 6</div>
                                    <div class="span6">Fluid 6</div>
                                </div>
                            </div>
                            <div class="span6">Fluid 6</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="body">
                <strong>Nulla at elementum quam, luctus feugiat ipsum</strong><br/>
                <strong><small>Vestibulum suscipit ornare dui consequat sodales. Maecenas eget sollicitudin diam. Aenean
                    in
                    augue arcu. Proin viverra velit eu elit eleifend posuere. Nunc ac arcu erat.</small></strong><br/>
                <!-- <a href="% url 'detalles' tar.numtar %}">{ tar.descorta|truncatechars:300 }}</a> -->
            </div>
        </div>
    </div>
    <div class="row clearfix">
    </div>


    </div>
</section>

得到这个

因为它应该给我这样的东西

我不知道可能缺少什么。存在 adminbsb 和 bootstrap 库。

Answer 1

第一次，我尝试了脚手架。它与引导程序类似，没有更多区别，这就是为什么我尝试为此给出答案。

请检查，然后告诉我。它是否有效。你想要或不想要。

<div class="row-fluid">
  <div class="span9">
    Level 1 column
    <div class="row-fluid">
      <div class="span6">Level 2 column
         <div class="row-fluid">
           <div class="span3">Level 3</div>
           <div class="span3">Level 3</div>
         </div>
      </div>
      <div class="span3">Level 2</div>
    </div>
  </div>
</div>

---

下面是卡片内的代码。

说明：

• 如果您希望所有视图中的列大小为 12。那么，就不需要给所有的col- [() - lg, md, sm ,xs]** Grid Class。 您只能使用 col-12。所有视口的大小为 12。
• 在类 "span6" 中。您必须将 "span" 列大小等于 6 的总和。 喜欢： 在类 "span6" 中，您可以给出 "span3" 和 "span3" 这是总和6。您可以采用任何大小的列，这取决于您。但是，它应该等于 6 的总和。 示例： 6 = 1+5、2+4、3+3、4+2、5+1。

<div class="col-12">
  <div class="card">
    <div class="bg-green row-fluid inline-group">
        <div class="span12">
             Fluid 12
           <div class="row-fluid">
             <div class="span6">
                Fluid 6
                 <div class="row-fluid">
                      <div class="span3">Fluid 3</div>
                      <div class="span3">Fluid 3</div>
                 </div>
             </div>
             <div class="span6">Fluid 6</div>
           </div>
        </div>
    </div>
  </div>
</div>