如何將div放置在4個部分中以進行移動視圖

我正在嘗試正確定位我的 div 以從移動設備查看，目前我可以在桌面視圖中正確定位我的 div 沒有任何問題，我附上了一個示例，說明它們如何在桌面視圖中顯示。

對于移動視圖，我希望元素以下列方式放置：

我用來構建 div 的代碼如下：

.CeroPadCeroMar {
  padding: 0px;
  margin: 0px;
}

.texto-encimaAnalisis {
  position: absolute;
  top: 10%;
  left: 8%;
}

.TextoAnalisis {
  font-family: 'Lettera Text Std';
  font-style: normal;
  font-size: 30px;
  color: #0F196C;
}

.TextoAnalisisDesc {
  font-family: 'Lettera Text Std';
  font-style: normal;
  font-size: 15px;
  color: #616160;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<section id="Industria" class="CeroPadCeroMar">
  <div class="col-xs-12 col-lg-12 CeroPadCeroMar">
    <img src="../content/image-backgroud.png" class="img-responsive" alt="" width="auto" height="345">
    <div class="texto-encimaAnalisis">
      <div class="col-md-12 col-xs-12 col-md-12 col-lg-12">
        <div class="col-md-12" style="min-height: 199px;">
          <div class="row">
            <div class="col-md-4" style="padding-right: 107px;">
              <p class="TextoAnalisis">
                <b style="font-weight: bold;">
                                            Lorem ipsum  amet. <br />dolor sit
                                        </b>
              </p>
              <p class="TextoAnalisisDesc">
                <b style="font-weight: bold;">
                                            Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
                                        </b>
              </p>

            </div>
            <div class="col-md-4" style="padding-right: 107px;">
              <p class="TextoAnalisis">
                <b style="font-weight: bold;">
                                            Lorem ipsum  amet. <br />dolor sit
                                        </b>
              </p>
              <p class="TextoAnalisisDesc">
                <b style="font-weight: bold;">
                                            Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
                                        </b>
              </p>

            </div>
            <div class="col-md-4" style="padding-right: 107px;">
              <p class="TextoAnalisis">
                <b style="font-weight: bold;">
                                            Lorem ipsum  amet. <br />dolor sit
                                        </b>
              </p>
              <p class="TextoAnalisisDesc">
                <b style="font-weight: bold;">
                                           Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
                                        </b>
              </p>

            </div>

          </div>
          <div class="col-md-4" style="margin-top: 50px; padding-right: 107px;">
            <p class="TextoAnalisis">
              <b style="font-weight: bold;">
                                        Lorem ipsum  amet. <br />dolor sit
                                    </b>
            </p>
            <p class="TextoAnalisisDesc">
              <b style="font-weight: bold;">
                                        Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
                                    </b>
            </p>

          </div>

        </div>

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

是否有一個類或屬性可用于使 div 在移動視圖中顯示我希望它們如何顯示？

uj5u.com熱心網友回復：

Bootstrap 行總是 12 小數寬度。如果您想在大型設備上連續放置 3 個盒子，您應該col-md-4在卡片上使用 (12 / 4 = 3)。要在小螢屏上每行有 2 張卡片，您可以使用col-xs-6它將 2 張卡片連續放置 (12 / 6 = 2)：

/* for visualization purpose only */

section > div {
  box-sizing: border-box;
  border: 2px dashed red;
  min-height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<section id="Industria" class="row">
  <div class="col-xs-6 col-md-4">1</div>
  <div class="col-xs-6 col-md-4">2</div>
  <div class="col-xs-6 col-md-4">3</div>
  <div class="col-xs-6 col-md-4">4</div>
</section>

標籤：html css 推特引导

上一篇：Bootstrap5下拉選單是否需要額外的外部div？

下一篇：JavascriptBootstrapMultiselect-如果沒有可用選項，則顯示搜索下拉選單