Bootstrap 为什么在平板电脑版中没有占据所有的高度？

edqdpe6u 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(1)|浏览(129)

我有这4张牌，排列成2x2…但是当我在平板电脑版本（iPad）中展示它时，它只占了一半...我怎么能让4张卡片占据整个屏幕，并且让它们的大小相同呢？

的数据
谢谢你的帮助

<style>
  body {
    background: url("images/fondo_con_formas_op.png") no-repeat center
      center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  .container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    width: 90%;
  }

  .columna1,
  .columna2,
  .columna3,
  .columna4,
  .columna5 {
    width: 100%;
    margin: 10px;
  }

  .boton {
    background: #f79206;
    color: white;
    font-weight: 500;
    font-size: 25px;
    padding: 10px;
    border-radius: 18px;
    transition: transform 0.2s;
    width: 40%;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 2px 5px 5px #888888;
    text-align: center;
  }

  @media (min-width: 600px) {
    .columna2,
    .columna3,
    .columna4,
    .columna5 {
      width: 47%;
      background-color: white;
      border-radius: 25px;
      padding: 15px;
    }
  }
</style>

<body style="display: grid; place-items: center">
<div class="container">
  <section class="columna1">
    <div class="boton">Selecciona tu pedido</div>
  </section>
  <section class="columna2">
    <div style="cursor: pointer" onclick="window.location='fin.html';">
      <div class="row g-0">
        <div
          class="col-md-4 m-0 row justify-content-center align-items-center"
        >
          <img
            src="images/shot 18.png"
            class="img-fluid rounded-start"
            alt="..."
          />
        </div>
        <div
          class="col-md-8 m-0 row justify-content-center align-items-center"
        >
          <div class="card-body">
            <h5 class="card-title color-text">EL GENIO X JUICE +18</h5>
            <p class="card-text color-text">Delicioso shot de mora azul.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="columna3">
    <div style="cursor: pointer" onclick="window.location='fin.html';">
      <div class="row g-0">
        <div
          class="col-md-4 m-0 row justify-content-center align-items-center"
        >
          <img
            src="images/shot 18.png"
            class="img-fluid rounded-start"
            alt="..."
          />
        </div>
        <div
          class="col-md-8 m-0 row justify-content-center align-items-center"
        >
          <div class="card-body">
            <h5 class="card-title color-text">EL GENIO X JUICE +18</h5>
            <p class="card-text color-text">Delicioso shot de mora azul.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="columna4">
    <div style="cursor: pointer" onclick="window.location='fin.html';">
      <div class="row g-0">
        <div
          class="col-md-4 m-0 row justify-content-center align-items-center"
        >
          <img
            src="images/regalo.png"
            class="img-fluid rounded-start"
            alt="..."
          />
        </div>
        <div
          class="col-md-8 m-0 row justify-content-center align-items-center"
        >
          <div class="card-body">
            <h5 class="card-title color-text">REGALO SORPRESA</h5>
            <p class="card-text color-text"></p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="columna5">
    <div style="cursor: pointer" onclick="window.location='fin.html';">
      <div class="row g-0">
        <div
          class="col-md-4 m-0 row justify-content-center align-items-center"
        >
          <img
            src="images/merch.png"
            class="img-fluid rounded-start"
            alt="..."
          />
        </div>
        <div
          class="col-md-8 m-0 row justify-content-center align-items-center"
        >
          <div class="card-body">
            <h5 class="card-title color-text">EL GENIO X MERCH</h5>
            <p class="card-text color-text"></p>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<script src="bootstrap/js/bootstrap.min.js"></script>

字符串
我用的是bootstrap。我想实现这个设计

的

twitter-bootstrap

来源：https://stackoverflow.com/questions/76620951/why-in-tablet-version-does-not-occupy-all-the-height

1条答案

按热度按时间

9udxz4iz1#

首先，如果columna1不应该在容器中，只需将其移出容器：

<body>
    <section class="columna1">
        <div class="boton">Selecciona tu pedido</div>
    </section>
    <div class="container">
        <section class="columna2">
            <div style="cursor: pointer" onclick="window.location='fin.html';">
            <div class="row g-0">
                <div
                class="col-md-4 m-0 row justify-content-center align-items-center"
                >
                <img
                    src="images/shot 18.png"
                    class="img-fluid rounded-start"
                    alt="..."
                />
                </div>
                <div
                class="col-md-8 m-0 row justify-content-center align-items-center"
                >
                <div class="card-body">
                    <h5 class="card-title color-text">EL GENIO X JUICE +18</h5>
                    <p class="card-text color-text">Delicioso shot de mora azul.</p>
                </div>
                </div>
            </div>
            </div>
        </section>
        <section class="columna3">
            <div style="cursor: pointer" onclick="window.location='fin.html';">
            <div class="row g-0">
                <div
                class="col-md-4 m-0 row justify-content-center align-items-center"
                >
                <img
                    src="images/shot 18.png"
                    class="img-fluid rounded-start"
                    alt="..."
                />
                </div>
                <div
                class="col-md-8 m-0 row justify-content-center align-items-center"
                >
                <div class="card-body">
                    <h5 class="card-title color-text">EL GENIO X JUICE +18</h5>
                    <p class="card-text color-text">Delicioso shot de mora azul.</p>
                </div>
                </div>
            </div>
            </div>
        </section>
        <section class="columna4">
            <div style="cursor: pointer" onclick="window.location='fin.html';">
            <div class="row g-0">
                <div
                class="col-md-4 m-0 row justify-content-center align-items-center"
                >
                <img
                    src="images/regalo.png"
                    class="img-fluid rounded-start"
                    alt="..."
                />
                </div>
                <div
                class="col-md-8 m-0 row justify-content-center align-items-center"
                >
                <div class="card-body">
                    <h5 class="card-title color-text">REGALO SORPRESA</h5>
                    <p class="card-text color-text"></p>
                </div>
                </div>
            </div>
            </div>
        </section>
        <section class="columna5">
            <div style="cursor: pointer" onclick="window.location='fin.html';">
            <div class="row g-0">
                <div
                class="col-md-4 m-0 row justify-content-center align-items-center"
                >
                <img
                    src="images/merch.png"
                    class="img-fluid rounded-start"
                    alt="..."
                />
                </div>
                <div
                class="col-md-8 m-0 row justify-content-center align-items-center"
                >
                <div class="card-body">
                    <h5 class="card-title color-text">EL GENIO X MERCH</h5>
                    <p class="card-text color-text"></p>
                </div>
                </div>
            </div>
            </div>
        </section>
    </div>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>

字符串
在你的body中删除inline样式，并在下面添加这个，使其成为一个100vh的flex容器：

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
}

型
然后在你的容器中，将它设置为增长，它将增长以填充可用的空间：

.container {
    flex-grow: 1;
}

型

赞(0）回复(0）举报 2023-08-01

我来回答

Bootstrap 为什么在平板电脑版中没有占据所有的高度？

1条答案

相关问题

热门标签

最新问答