如何动态地将div放在两行但在一列中？

Question

如何将div放在两行但在一列中，以便它可以使用bootstrap动态工作？

HTML

<div class="container" id="centered">
  <div id="outletsBackground">
    <div class="row">
      <ul class="list-inline">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <li>
            <a href="#">
              <div class="topicBox littleSquare"></div>
            </a>
          </li>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <li>
            <a href="#">
              <div class="topicBox littleSquare"></div>
            </a>
          </li>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <li>
            <a href="#">
              <div class="topicBox littleSquare"></div>
            </a>
          </li>
        </div>
      </ul>
    </div>
    <div class="row">
      <ul class="list-inline">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <li>
            <a href="#">
              <div class="topicBox littleSquare"></div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="topicBox littleSquare"></div>
            </a>
          </li>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <li>
            <a href="#">
              <div class="topicBox littleSquare"></div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="topicBox littleSquare"></div>
            </a>
          </li>
          <div>
            <a href="#">
              <div class="topicBox bigSquare"></div>
            </a>
          </div>
        </div>
      </ul>
    </div>
  </div>
</div>

CSS

.topicBox {
    display: inline-block;
    line-height: 24px;
    text-align: center;
    background: white;

}

.littleSquare {
    width: 315px;
    height: 250px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.bigSquare {
    width: 315px;
    height: 525px;
    margin-bottom: 10px;
    margin-top: 10px;
}

Expected Result

Actual Result

我还想了解如何轻松地让更大的盒子在网站的不同部分移动。

Answer 1

您的HTML无效且您使用错误模式的引导程序，请参阅如何将第二行和第三行包装到更大的div中，然后使用该div中的行。

<div class="container" id="centered">
    <div id="outletsBackground">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="topicBox littleSquare"></div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="topicBox littleSquare"></div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="topicBox littleSquare"></div>
            </div>
        </div>
        <div class="row">
            <!-- Wrapping two boxes into a larger box -->
            <div class="col-lg-8 col-md-8 col-xs-12">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <div class="topicBox littleSquare"></div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <div class="topicBox littleSquare"></div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <div class="topicBox littleSquare"></div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <div class="topicBox littleSquare"></div>
                    </div>
                </div>

            </div>

            <div class="col-lg-4 col-md-4 col-xs-12">
                <div class="topicBox bigSquare"></div>
            </div>

        </div>

    </div>

</div>

CSS中的

我将正文背景添加为红色仅用于演示。

.topicBox {
    display: inline-block;
    line-height: 24px;
    text-align: center;
    background: #fff;
}

.littleSquare {
    width: 315px;
    height: 250px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.bigSquare {
    width: 315px;
    height: 525px;
    margin-bottom: 10px;
    margin-top: 10px;
}

body {
    background-color: red;
}