调整位于另一个 bootstrap div 内的 div 的大小
Resize div that is inside of another bootstrap div
我有一个 div 在滑块内显示一些产品，如下图所示：
调整屏幕大小时，媒体查询起作用并且内容重新排列：
当包含产品滑块的 div 位于 bootstrap div col-lg-x 内部时，会出现问题。例如，当它在 div.row>div.col-lg-8 中时发生的事情的图片（图像被剪切并且内容不会像调整屏幕大小时那样重新排列）：
div有以下html：
#productSlider .MS-content .item {
display: inline-block;
width: 20%;
position: relative;
vertical-align: top;
overflow: hidden;
height: 100%;
white-space: normal;
}
@media screen and (max-width: 1200px) {
#productSlider .MS-content .item {
width: 25%;
}
}
@media screen and (max-width: 991px) {
#productSlider .MS-content .item {
width: 33.3333%;
}
}
@media screen and (max-width: 768px) {
#productSlider .MS-content .item {
width: 50%;
}
}
@media screen and (max-width: 575px) {
#productSlider .MS-content .item {
width: 100%;
}
.sliderHeading {
font-size: 18px !important;
margin: 30px 0 20px !important;
}
}
img {
border: 1px solid black;
}
<div
class="block"
style="padding: 0 50px; position: relative; margin-bottom: 40px;"
>
<div id="productSlider" class="" style="position: relative;">
<div
class="MS-content"
style="white-space: nowrap; overflow: hidden; margin: 0px;"
>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img
style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
src="./product.png"
/>
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img
style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
src="./product.png"
/>
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img
style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
src="./product.png"
/>
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img
style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
src="./product.png"
/>
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img
style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
src="./product.png"
/>
<h2>
My product title
</h2>
</a>
</div>
</div>
</div>
<div class="MS-controls">
<button
class="MS-left"
style="background-color: rgba(255, 255, 255, 0.77); padding: 15px; box-shadow: rgba(179, 179, 179, 0.32) 0px 0px 10px 2px; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); left: -28px; border-radius: 4px; border: 0px;"
>
<a
><img
src="./arrow-left.png"
alt=""
style="max-width: 22px;"
/></a></button
><button
class="MS-right"
style="background-color: rgba(255, 255, 255, 0.77); padding: 15px; box-shadow: rgba(179, 179, 179, 0.32) 0px 0px 10px 2px; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); right: -28px; border-radius: 4px; border: 0px;"
>
<a
><img
src="./arrow-right.png"
alt=""
style="max-width: 22px;"
/></a>
</button>
</div>
</div>
</div>
放入
里面就坏了
<div class="row">
<div class="col-lg-8">
... slider code here
</div>
</div>
只需从 #productSlider .MS-content .item 中删除 width:20%。
#productSlider .MS-content .item {
display: inline-block;
width:20%; /*remove this */
position: relative;
vertical-align: top;
overflow: hidden;
height: 100%;
white-space: normal;
}
并删除下面给定的 css:
@media screen and (max-width: 1200px) {
#productSlider .MS-content .item {
width: 25%;
}
}
@media screen and (max-width: 991px) {
#productSlider .MS-content .item {
width: 33.3333%;
}
}
#productSlider .MS-content .item {
display: inline-block;
position: relative;
vertical-align: top;
overflow: hidden;
height: 100%;
white-space: normal;
}
@media screen and (max-width: 768px) {
#productSlider .MS-content .item {
width: 50%;
}
}
@media screen and (max-width: 575px) {
#productSlider .MS-content .item {
width: 100%;
}
.sliderHeading {
font-size: 18px !important;
margin: 30px 0 20px !important;
}
}
.row{
margin:0px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="row">
<div class="col-lg-8">
<div class="block" style="padding: 0 50px; position: relative; margin-bottom: 40px;">
<div id="productSlider" class="" style="position: relative;">
<div class="MS-content" style="white-space: nowrap; overflow: hidden; margin: 0px;">
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;" src="https://dummyimage.com/600x400/000/fff" />
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;" src="https://dummyimage.com/600x400/000/fff" />
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;" src="https://dummyimage.com/600x400/000/fff" />
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;" src="./product.png" />
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;" src="https://dummyimage.com/600x400/000/fff" />
<h2>
My product title
</h2>
</a>
</div>
</div>
</div>
<div class="MS-controls">
<button class="MS-left" style="background-color: rgba(255, 255, 255, 0.77); padding: 15px; box-shadow: rgba(179, 179, 179, 0.32) 0px 0px 10px 2px; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); left: -28px; border-radius: 4px; border: 0px;">
<a
><img
src="./arrow-left.png"
alt=""
style="max-width: 22px;"
/></a></button
><button
class="MS-right"
style="background-color: rgba(255, 255, 255, 0.77); padding: 15px; box-shadow: rgba(179, 179, 179, 0.32) 0px 0px 10px 2px; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); right: -28px; border-radius: 4px; border: 0px;"
>
<a
><img
src="./arrow-right.png"
alt=""
style="max-width: 22px;"
/></a>
</button>
</div>
</div>
</div>
</div>
</div>
我有一个 div 在滑块内显示一些产品，如下图所示：
调整屏幕大小时，媒体查询起作用并且内容重新排列：
当包含产品滑块的 div 位于 bootstrap div col-lg-x 内部时，会出现问题。例如，当它在 div.row>div.col-lg-8 中时发生的事情的图片（图像被剪切并且内容不会像调整屏幕大小时那样重新排列）：
div有以下html：
#productSlider .MS-content .item {
display: inline-block;
width: 20%;
position: relative;
vertical-align: top;
overflow: hidden;
height: 100%;
white-space: normal;
}
@media screen and (max-width: 1200px) {
#productSlider .MS-content .item {
width: 25%;
}
}
@media screen and (max-width: 991px) {
#productSlider .MS-content .item {
width: 33.3333%;
}
}
@media screen and (max-width: 768px) {
#productSlider .MS-content .item {
width: 50%;
}
}
@media screen and (max-width: 575px) {
#productSlider .MS-content .item {
width: 100%;
}
.sliderHeading {
font-size: 18px !important;
margin: 30px 0 20px !important;
}
}
img {
border: 1px solid black;
}
<div
class="block"
style="padding: 0 50px; position: relative; margin-bottom: 40px;"
>
<div id="productSlider" class="" style="position: relative;">
<div
class="MS-content"
style="white-space: nowrap; overflow: hidden; margin: 0px;"
>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img
style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
src="./product.png"
/>
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img
style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
src="./product.png"
/>
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img
style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
src="./product.png"
/>
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img
style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
src="./product.png"
/>
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img
style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
src="./product.png"
/>
<h2>
My product title
</h2>
</a>
</div>
</div>
</div>
<div class="MS-controls">
<button
class="MS-left"
style="background-color: rgba(255, 255, 255, 0.77); padding: 15px; box-shadow: rgba(179, 179, 179, 0.32) 0px 0px 10px 2px; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); left: -28px; border-radius: 4px; border: 0px;"
>
<a
><img
src="./arrow-left.png"
alt=""
style="max-width: 22px;"
/></a></button
><button
class="MS-right"
style="background-color: rgba(255, 255, 255, 0.77); padding: 15px; box-shadow: rgba(179, 179, 179, 0.32) 0px 0px 10px 2px; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); right: -28px; border-radius: 4px; border: 0px;"
>
<a
><img
src="./arrow-right.png"
alt=""
style="max-width: 22px;"
/></a>
</button>
</div>
</div>
</div>
放入
里面就坏了<div class="row">
<div class="col-lg-8">
... slider code here
</div>
</div>
只需从 #productSlider .MS-content .item 中删除 width:20%。
#productSlider .MS-content .item {
display: inline-block;
width:20%; /*remove this */
position: relative;
vertical-align: top;
overflow: hidden;
height: 100%;
white-space: normal;
}
并删除下面给定的 css:
@media screen and (max-width: 1200px) {
#productSlider .MS-content .item {
width: 25%;
}
}
@media screen and (max-width: 991px) {
#productSlider .MS-content .item {
width: 33.3333%;
}
}
#productSlider .MS-content .item {
display: inline-block;
position: relative;
vertical-align: top;
overflow: hidden;
height: 100%;
white-space: normal;
}
@media screen and (max-width: 768px) {
#productSlider .MS-content .item {
width: 50%;
}
}
@media screen and (max-width: 575px) {
#productSlider .MS-content .item {
width: 100%;
}
.sliderHeading {
font-size: 18px !important;
margin: 30px 0 20px !important;
}
}
.row{
margin:0px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="row">
<div class="col-lg-8">
<div class="block" style="padding: 0 50px; position: relative; margin-bottom: 40px;">
<div id="productSlider" class="" style="position: relative;">
<div class="MS-content" style="white-space: nowrap; overflow: hidden; margin: 0px;">
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;" src="https://dummyimage.com/600x400/000/fff" />
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;" src="https://dummyimage.com/600x400/000/fff" />
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;" src="https://dummyimage.com/600x400/000/fff" />
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;" src="./product.png" />
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;" src="https://dummyimage.com/600x400/000/fff" />
<h2>
My product title
</h2>
</a>
</div>
</div>
</div>
<div class="MS-controls">
<button class="MS-left" style="background-color: rgba(255, 255, 255, 0.77); padding: 15px; box-shadow: rgba(179, 179, 179, 0.32) 0px 0px 10px 2px; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); left: -28px; border-radius: 4px; border: 0px;">
<a
><img
src="./arrow-left.png"
alt=""
style="max-width: 22px;"
/></a></button
><button
class="MS-right"
style="background-color: rgba(255, 255, 255, 0.77); padding: 15px; box-shadow: rgba(179, 179, 179, 0.32) 0px 0px 10px 2px; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); right: -28px; border-radius: 4px; border: 0px;"
>
<a
><img
src="./arrow-right.png"
alt=""
style="max-width: 22px;"
/></a>
</button>
</div>
</div>
</div>
</div>
</div>