Bootstrap 如何放大卡片中的图像并缩小空白空间？

sxpgvts3  于 2023-06-04  发布在  Bootstrap
关注(0)|答案(5)|浏览(392)

我有一张有图像的卡片，旁边是一条横幅。我使用col-lg-8和col-lg-4。问题是卡片（也有padding-right: 20px）和横幅之间有太多的空白，如下面的截图：x1c 0d1x
我想删除所有白色，只留下padding-right：20 px（或margin-right）之间的卡和横幅。因此，我想像在图片中一样扩展图像的宽度（直到示例红线），因为橙子横幅的大小是fixed，我不想调整它的大小。所以我想放大卡，一些白色（20 px）卡和横幅之间，然后固定的横幅。因此，唯一的“空白”必须是卡和横幅之间的20 px，以遵守col-lg-8和col-lg-4中的引导网格，并且没有其他空白。
如何放大卡，使col-lg-8和col-lg-4保持相同？（我也试过col-lg-9，但我不喜欢它，因为卡太大了）。

我的解决方案尝试（看起来似乎是正确的，但不是）：
***WIDHT IMAGE 105%：**我试着将105% widht应用到卡上，问题似乎得到了解决，但当我将窗口变小时，卡会加入横幅（或重叠），而不会留下padding-right。
***WIDHT COLUMNS 75%和25%：**我尝试更改列的宽度。我将.col-lg-8从width: 66.66666667%更改为75%。然后我将.col-lg-4从width: 25%改为.col-lg-4，因此总数为100%。在这里，问题似乎也解决了，但有几个人建议我不要改变Bootstrap的列宽，并告诉我这不是很专业。
***删除文本对齐：右：**我尝试删除.banner {text-align: right;}。以这种方式，横幅接近卡片，但在其右侧（横幅的右侧）创建空白空间。我不知道这是否正确。你观察到另一个screenshot

这里是the code on CodePen，你可以在这里更好地测试。什么是最好的解决方案，我问上面？谢谢大家，提前！谢谢！

@media (min-width: 992px) {
  .container-pc {
    display: flex;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 992px) {
  .container-primapagina {
    padding-right: 20px;
  }
}

.banner {
  text-align: right;
}

.height1 {
  height: 450px;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <link href="style.css" rel="stylesheet">

</head>

<body>

  <div class="container-pc">

    <div class="container-primapagina col-12 col-md-8 col-lg-8">
      <div class="card text-bg-dark">
        <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="card-img height1" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">Card title</h5>
        </div>
      </div>
    </div>

    <div class="banner col-lg-4">
      <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
    </div>
  </div>

  <div class="container-pc">
    <div class="col-lg-8" style="background-color: aqua;" ;>Col 8 (Utility only for measuring)</div>
    <div class="col-lg-4" style="background-color: rgb(81, 255, 0);" ;>Col 4 (Utility only for measuring)</div>
  </div>

</body>

</html>
twitter-bootstrap

5条答案

按热度按时间
hujrc8aj

hujrc8aj1#

从代码、屏幕截图和评论来看，这似乎就是你要找的东西。由于图像被设置为覆盖并在卡片的背景中，因此与网格的列匹配时会更清晰一些。

@media (min-width: 992px) {
  .container-pc {
    display: flex;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
}

.image-bground {
  background-image: url("https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg");
  background-attachment: fixed;
  margin-right:20px;
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-pc">

  <div class="container-primapagina col-12 col-md-8 col-lg-8 image-bground">
    <div class="card text-bg-dark">
      <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
      </div>
    </div>
  </div>

  <div class="banner col-lg-4">
    <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
  </div>
</div>

<div class="container-pc">
  <div class="col-lg-8" style="background-color: aqua;" ;>Col 8 (Utility only for measuring)</div>
  <div class="col-lg-4" style="background-color: rgb(81, 255, 0);" ;>Col 4 (Utility only for measuring)</div>
</div>
赞(0）分享  回复(0）举报  2023-06-04
lsmepo6l

lsmepo6l2#

尝试使用col和col-auto作为div。见下文

@media (min-width: 992px) {
  .container-pc {
    display: flex;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 992px) {
  .container-primapagina {
    padding-right: 20px;
  }
}

.banner {
  text-align: right;
}

.height1 {
  height: 450px;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <link href="style.css" rel="stylesheet">

</head>

<body>

  <div class="container-pc">

    <div class="container-primapagina col">
      <div class="card text-bg-dark">
        <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="card-img height1" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">Card title</h5>
        </div>
      </div>
    </div>

    <div class="banner col-12 col-md-auto">
      <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
    </div>
  </div>

  <div class="container-pc">
    <div class="col" style="background-color: aqua;" ;>Col (Utility only for measuring)</div>
    <div class="col-12 col-md-auto" style="background-color: rgb(81, 255, 0);" ;>Col-md-auto (Utility only for measuring) [will take 100% width for devices smaller than `md-width(&lt;740px)`]
    </div>

</body>

</html>
赞(0）分享  回复(0）举报  2023-06-04
0kjbasz6

0kjbasz63#

@media (min-width: 992px) {
  .container-pc {
    display: flex;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 992px) {
  .container-primapagina {
    padding-right: 20px;
  }
}


.height1 {
  height: 450px;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <link href="style.css" rel="stylesheet">

</head>

<body>

  <div class="container-pc">

    <div class="container-primapagina col-12 col-md-8 col-lg-8">
      <div class="card text-bg-dark">
        <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="card-img height1" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">Card title</h5>
        </div>
      </div>
    </div>

    <div class="banner col-lg-4">
      <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
    </div>
  </div>

  <div class="container-pc">
    <div class="col-lg-8" style="background-color: aqua;" ;>Col 8 (Utility only for measuring)</div>
    <div class="col-lg-4" style="background-color: rgb(81, 255, 0);" ;>Col 4 (Utility only for measuring)</div>
  </div>

</body>

</html>
赞(0）分享  回复(0）举报  2023-06-04
j2datikz

j2datikz4#

检查全屏输出

  • 老实说，你试图实现的cab纯粹是用bootstrap完成的。
  • 你得明白 Bootstrap 在12号网格上工作。
  • 您直接使用col-，其理想的是遵循下面的代码结构。
<div class="row">
   <div class="col"></div>
   <div class="col"></div>
</div>
  • 你可以看到我的代码，我甚至没有使用下面的一个单一的css，如果你想改变容器的宽度，你可以改变它在.container类或替换为新的类。
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <link href="style.css" rel="stylesheet">

</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-9 ps-0">
        <div class="card text-bg-dark">
          <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="img-fluid" alt="...">
          <div class="card-img-overlay">
            <h5 class="card-title">Card title</h5>
          </div>
        </div>
      </div>
      <div class="col-md-3 pe-0">
        <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner" class="img-fluid h-100">
      </div>
    </div>
    <div class="row">
      <div class="col-md-9" style="background-color: aqua;" ;="">Col 9 (Utility only for measuring)</div>
      <div class="col-md-3" style="background-color: rgb(81, 255, 0);" ;="">Col 3 (Utility only for measuring)</div>
    </div>
  </div>
</body>

</html>

纯HTML CSS方法

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1140px;
  margin-inline: auto;
}

.card {
  display: flex;
  gap: 15px;
}

.card .card-left {
  position: relative;
}

.card .card-left .card-title {
  position: absolute;
  top: 15px;
  left: 15px;
  color: white;
  font-size: 32px;
}

.card .card-left img {
  height: 453px;
  width: 100%;
  object-fit: cover;
}
<body>
  <div class="container">
    <div class="card">
      <div class="card-left">
        <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" alt="...">
        <h5 class="card-title">Card title</h5>
      </div>
      <div class="card-right">
        <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner" class="img-fluid h-100">
      </div>
    </div>
  </div>
</body>
赞(0）分享  回复(0）举报  2023-06-04
ar7v8xwq

ar7v8xwq5#

好吧，我知道你的意图了。您希望右侧的横幅保持固定宽度，而左侧的卡片填充剩余的空间。你不应该使用列。你应该使用Flex。容器container-pc已经是一个flex容器，因此只需删除列类即可。这些列不应弯曲，但应保持成比例的宽度。列不能重叠。你用错了工具。
如果要将比例从8：4更改为9：3，则横幅会溢出，因为它的大小不适合列。
我建议阅读Bootstrap documentation，以了解如何使用Bootstrap，同时避免冗余和链接不必要的样式表和JavaScript文件。布局在窄屏幕上响应的一个障碍是图像使用固定的大小。
以下示例显示：

  • 色谱柱比例为9：3
  • 删除列类以使用容器flexbox
  • 将Bootstrap的d-flex类应用到容器
  • 将d-md-flex应用于容器并将object-fit-cover应用于卡背景图像
  • （d-md-flex在中间断点处加上display: flex）
  • （object-fit-cover保持图像的宽高比，并在容器缩小时剪掉边缘，而不是压扁图像）
@media (min-width: 992px) {
  .container-pc {
    display: flex;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 992px) {
  .container-primapagina {
    padding-right: 20px;
  }
}

.banner {
  text-align: right;
}

.height1 {
  height: 450px;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap Example</title>

</head>

<body>

<p class="text-center mt-4 mb-1">d-md-flex &amp; object-fit-cover classes</p>
  <div class="container-pc d-md-flex">
    <div class="container-primapagina">
      <div class="card text-bg-dark">
        <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="card-img height1 object-fit-cover" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">Card title</h5>
        </div>
      </div>
    </div>
    <div class="banner">
      <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
    </div>
  </div>

<p class="text-center mt-4 mb-1">d-flex class</p>
  <div class="container-pc d-flex">
    <div class="container-primapagina">
      <div class="card text-bg-dark">
        <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="card-img height1" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">Card title</h5>
        </div>
      </div>
    </div>
    <div class="banner">
      <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
    </div>
  </div>

<p class="text-center mt-4 mb-1">Without column classes</p>
  <div class="container-pc">
    <div class="container-primapagina">
      <div class="card text-bg-dark">
        <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="card-img height1" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">Card title</h5>
        </div>
      </div>
    </div>
    <div class="banner">
      <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
    </div>
  </div>

  <div class="container-pc">
    <div class="col-lg-8" style="background-color: aqua;" ;>Col 8 (Utility only for measuring)</div>
    <div class="col-lg-4" style="background-color: rgb(81, 255, 0);" ;>Col 4 (Utility only for measuring)</div>
  </div>

<p class="text-center mt-4 mb-1">Columns 9:3</p>
  <div class="container-pc">
    <div class="container-primapagina col-12 col-md-9 col-lg-9">
      <div class="card text-bg-dark">
        <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="card-img height1" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">Card title</h5>
        </div>
      </div>
    </div>
    <div class="banner col-lg-3">
      <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
    </div>
  </div>

  <div class="container-pc">
    <div class="col-lg-8" style="background-color: aqua;" ;>Col 8 (Utility only for measuring)</div>
    <div class="col-lg-4" style="background-color: rgb(81, 255, 0);" ;>Col 4 (Utility only for measuring)</div>
  </div>

</body>

</html>
赞(0）分享  回复(0）举报  2023-06-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com