在引导列中定位元素-解网

问：

我有一个画廊式的展示。我试图实现的是将这些项目的标题放在它们的显示框中。

检查 jsfiddle 的方案：https://jsfiddle.net/xry7ezb9/5/

问题在于父元素使用 bootstrap 类，该类在元素的两侧创建填充（当然，这被认为是元素大小的一部分），因此子元素将其作为 100% 的宽度进行调整。col

我试图实现的结果是第二个画廊项目。但它的实现方式是......“Hacky”（为术语道歉），因为我以硬编码的方式定义值，并依赖于 Bootstrap 不会改变它的事实。另外，我确信还有另一种方法可以实现这一目标。

最后一个元素本身具有正确的宽度，但由于我不能使用绝对定位将其放入正确的位置，因此我不确定如何应用它。div

此外，不确定第 3 个磁贴方法是否真的可行（尽管这可能是由于图库项高度是硬编码的）。

我应该如何处理这个问题，同时牢记响应能力？

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.gallery-item-container {
	height: 200px;
	max-height: 200px;
	cursor: pointer;
}

.gallery-item-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	border: unset;
	border-radius: unset;
	background: unset;
	border: solid 1px #929292;
  border-radius: 5px;
  background-color:#fff;
}

.gallery-item-logo:hover{
    background-color:#c7c7c7;
    transition: 0.5s;
}

.gallery-item-logo > img {
    max-height: 70%;
    max-width: 90%;
}

.speaker-name, .item-title {
    position: absolute;
    text-align: center;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 1000;
    padding: 5px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}
.no-absolute {
    /* position: absolute; */
    text-align: center;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 1000;
    padding: 5px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}

.no-absolute-top-margin-test{
    height: 15%;
    margin-top: -30px;
}

/* Offsetting bootstrap col class padding on the parent (it expands parent body by 15px on each side thus children inherit that extra width) */
.col-padding-offset {
    max-width: calc(100% - 30px);
    margin-left: 15px;
    max-height: 15%; // Separate this
    height: 15%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

    <div class="gallery-item-container mb-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">

        <div class="gallery-item-logo" data-toggle="modal" data-target="#participant_modal_8">
            <img class="img-fluid" src="https://vignette.wikia.nocookie.net/lotr/images/8/8d/Gandalf-2.jpg/revision/latest?cb=20130209172436">
            <span class="icon-focus"></span>
        </div>

        <div class="item-title">
            <p><b>test title</b></p>
        </div>

    </div>

    <div class="gallery-item-container mb-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">

        <div class="gallery-item-logo" data-toggle="modal" data-target="#participant_modal_16">
            <img class="img-fluid" src="https://vignette.wikia.nocookie.net/lotr/images/8/8d/Gandalf-2.jpg/revision/latest?cb=20130209172436">
            <span class="icon-focus"></span>

        </div>

        <div class="item-title col-padding-offset">
            <p><b>test title</b></p>
        </div>

    </div>

    <div class="gallery-item-container mb-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">

        <div class="gallery-item-logo" data-toggle="modal" data-target="#participant_modal_11">
            <img class="img-fluid" src="https://vignette.wikia.nocookie.net/lotr/images/8/8d/Gandalf-2.jpg/revision/latest?cb=20130209172436">
            <span class="icon-focus"></span>
        </div>

        <div class="no-absolute no-absolute-top-margin-test">
            <p><b>test title</b></p>
        </div>

    </div>

    <div class="gallery-item-container mb-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">

        <div class="gallery-item-logo" data-toggle="modal" data-target="#participant_modal_2">
            <img class="img-fluid" src="https://vignette.wikia.nocookie.net/lotr/images/8/8d/Gandalf-2.jpg/revision/latest?cb=20130209172436">
            <span class="icon-focus"></span>
        </div>

        <div class="no-absolute">
            <p><b>test title</b></p>
        </div>

    </div>
    
</div>

HTML CSS 引导程序-4

在引导列中定位元素

Positioning an element within bootstrap column

评论

评论