Fatal编程技术网
  • html/
  • Html 引导4列中断

Html 引导4列中断

html twitter-bootstrap bootstrap-4

Html 引导4列中断,html,twitter-bootstrap,bootstrap-4,Html,Twitter Bootstrap,Bootstrap 4,我试图复制右侧的以下列： 但继续将最后两个框设置到另一行： 我一直在看他们的照片，但我不清楚，或者我可能错过了什么 这是我目前掌握的代码： <div class="col-xs-12 col-md-2"> <!-- Card --> <div class="card card-body"> <blockquot

我试图复制右侧的以下列：

但继续将最后两个框设置到另一行：

我一直在看他们的照片，但我不清楚，或者我可能错过了什么

这是我目前掌握的代码：

       <div class="col-xs-12 col-md-2">
                    <!-- Card -->
                    <div class="card card-body">
                        <blockquote class="card-blockquote">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                            <footer>
                                <small class="text-muted">
                                    Someone famous in <cite title="Source Title">Source Title</cite>
                                </small>
                            </footer>
                        </blockquote>
                    </div>

                </div>
                <div class="col-xs-12 col-md-2">
                    <!-- Card -->
                    <div class="card card-body">
                        <blockquote class="card-blockquote">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                            <footer>
                                <small class="text-muted">
                                    Someone famous in <cite title="Source Title">Source Title</cite>
                                </small>
                            </footer>
                        </blockquote>
                    </div>

                </div>
                <div class="w-100"></div>
                <div class="col-xs-12 col-md-2">
                    <!-- Card -->
                    <div class="card card-body">
                        <blockquote class="card-blockquote">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                            <footer>
                                <small class="text-muted">
                                    Someone famous in <cite title="Source Title">Source Title</cite>
                                </small>
                            </footer>
                        </blockquote>
                    </div>

                </div>
                <div class="col-xs-12 col-md-2">
                    <!-- Card -->
                    <div class="card card-body">
                        <blockquote class="card-blockquote">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                            <footer>
                                <small class="text-muted">
                                    Someone famous in <cite title="Source Title">Source Title</cite>
                                </small>
                            </footer>
                        </blockquote>
                    </div>

                </div>
            </div><!-- .end Second row -->
        </div>


Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
试试这个

注意：您可以提及
col-12
，而不是
col-xs-12

检查演示

HTML


Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
试试这个

注意：您可以提及
col-12
，而不是
col-xs-12

检查演示

HTML


Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-3 mb-3">
      <!-- Card -->
      <div class="card card-body h-100">
        <blockquote class="card-blockquote">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
          <footer>
            <small class="text-muted">
                                    Someone famous in <cite title="Source Title">Source Title</cite>
                                </small>
          </footer>
        </blockquote>
      </div>

    </div>
    <div class="col-xs-12 col-sm-3 mb-3">
      <!-- Card -->
      <div class="card card-body h-100">
        <blockquote class="card-blockquote">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
          <footer>
            <small class="text-muted">
                                    Someone famous in <cite title="Source Title">Source Title</cite>
                                </small>
          </footer>
        </blockquote>
      </div>

    </div>
    <div class="col-xs-12 col-sm-6 mb-3">
      <div class="row">
        <div class="col-xs-12 col-sm-6 mb-3">
          <!-- Card -->
          <div class="card card-body">
            <blockquote class="card-blockquote">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer>
                <small class="text-muted">
                                    Someone famous in <cite title="Source Title">Source Title</cite>
                                </small>
              </footer>
            </blockquote>
          </div>

        </div>
        <div class="col-xs-12 col-sm-6 mb-3">
          <!-- Card -->
          <div class="card card-body">
            <blockquote class="card-blockquote">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer>
                <small class="text-muted">
                                    Someone famous in <cite title="Source Title">Source Title</cite>
                                </small>
              </footer>
            </blockquote>
          </div>

        </div>
        <div class="col-xs-12 col-sm-6 mb-3 mb-sm-0">
          <!-- Card -->
          <div class="card card-body">
            <blockquote class="card-blockquote">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer>
                <small class="text-muted">
                                    Someone famous in <cite title="Source Title">Source Title</cite>
                                </small>
              </footer>
            </blockquote>
          </div>

        </div>
        <div class="col-xs-12 col-sm-6 mb-3 mb-sm-0">
          <!-- Card -->
          <div class="card card-body">
            <blockquote class="card-blockquote">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer>
                <small class="text-muted">
                                    Someone famous in <cite title="Source Title">Source Title</cite>
                                </small>
              </footer>
            </blockquote>
          </div>

        </div>
      </div>

    </div>
  </div>
</div>