我有一张有图像的卡片,旁边是一条横幅。我使用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>
5条答案
按热度按时间hujrc8aj1#
从代码、屏幕截图和评论来看,这似乎就是你要找的东西。由于图像被设置为覆盖并在卡片的背景中,因此与网格的列匹配时会更清晰一些。
lsmepo6l2#
尝试使用
col
和col-auto
作为div。见下文0kjbasz63#
j2datikz4#
检查全屏输出
col-
,其理想的是遵循下面的代码结构。.container
类或替换为新的类。纯HTML CSS方法
ar7v8xwq5#
好吧,我知道你的意图了。您希望右侧的横幅保持固定宽度,而左侧的卡片填充剩余的空间。你不应该使用列。你应该使用Flex。容器
container-pc
已经是一个flex容器,因此只需删除列类即可。这些列不应弯曲,但应保持成比例的宽度。列不能重叠。你用错了工具。如果要将比例从8:4更改为9:3,则横幅会溢出,因为它的大小不适合列。
我建议阅读Bootstrap documentation,以了解如何使用Bootstrap,同时避免冗余和链接不必要的样式表和JavaScript文件。布局在窄屏幕上响应的一个障碍是图像使用固定的大小。
以下示例显示:
d-flex
类应用到容器d-md-flex
应用于容器并将object-fit-cover
应用于卡背景图像d-md-flex
在中间断点处加上display: flex
)object-fit-cover
保持图像的宽高比,并在容器缩小时剪掉边缘,而不是压扁图像)