我有一个引导布局问题,我无法弄清楚如何解决。
在我的页面上,我展示了6辆最近的汽车,在桌面视图中,我希望每排3辆汽车,所以每辆汽车都位于一个自举式div容器内: col-md-4 col-sm -6 col-xs-12
汽车图片响应迅速。虽然调整大小的图像大小相同,但如果汽车的原始分辨率略有不同,我的桌面布局会扭曲,如下所示。
下面你可以看到html& css代码
<div class="container">
<!-- Section Header -->
<div class="section-header">
<h3>Son Eklenen Arabalar</h3>
<p>Farklı bütçe ve ihtiyaçlara göre zengin araba seçeneklerimizi görmek için, satılık araçlar bağlatısına tıklayabilirsiniz. Aşağıda son eklenen araçlarımızdan kısaca örnekleri görmektesiniz.</p>
</div><!-- Section Header /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
<div itemscope="" itemtype="http://schema.org/Car" class="item">
<a itemprop="url" href="/ikinci-el/2016-audi-a3-a3-sedan-1-6-tdi-sport-line-dizel-otomatik-beyaz-379" title="2016 Audi A3İncele">
<img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/5244/_MG_0230.jpg?1523107625" alt="sahibinden satılık araba 2016 Audi A3 A3 Sedan 1.6 TDI Sport Line Dizel Otomatik 19000 KM">
</a>
<div class="inventroy-content">
<a itemprop="url" href="/ikinci-el/2016-audi-a3-a3-sedan-1-6-tdi-sport-line-dizel-otomatik-beyaz-379" title="2016 Audi A3İncele">
<h3>Audi A3</h3>
<span>2016</span>
<span>Dizel</span>
<span>Otomatik</span>
</a>
</div>
</div>
</div><!-- Row /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
<div itemscope="" itemtype="http://schema.org/Car" class="item">
<a itemprop="url" href="/ikinci-el/2013-hyundai-i30-1-6-crdi-style-dizel-otomatik-beyaz-378" title="2013 Hyundai i30İncele">
<img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/5229/_MG_0208.jpg?1523106439" alt="sahibinden satılık araba 2013 Hyundai i30 1.6 CRDi Style Dizel Otomatik 42840 KM">
</a>
<div class="inventroy-content">
<a itemprop="url" href="/ikinci-el/2013-hyundai-i30-1-6-crdi-style-dizel-otomatik-beyaz-378" title="2013 Hyundai i30İncele">
<h3>Hyundai i30</h3>
<span>2013</span>
<span>Dizel</span>
<span>Otomatik</span>
</a>
</div>
</div>
</div><!-- Row /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
<div itemscope="" itemtype="http://schema.org/Car" class="item">
<a itemprop="url" href="/ikinci-el/2017-peugeot-3008-1-6-bluehdi-allure-dizel-otomatik-kirmizi-373" title="2017 Peugeot 3008İncele">
<img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/5199/_MG_0981.jpg?1517238228" alt="sahibinden satılık araba 2017 Peugeot 3008 1.6 BlueHDi Allure Dizel Otomatik 8000 KM">
</a>
<div class="inventroy-content">
<a itemprop="url" href="/ikinci-el/2017-peugeot-3008-1-6-bluehdi-allure-dizel-otomatik-kirmizi-373" title="2017 Peugeot 3008İncele">
<h3>Peugeot 3008</h3>
<span>2017</span>
<span>Dizel</span>
<span>Otomatik</span>
</a>
</div>
</div>
</div><!-- Row /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
<div itemscope="" itemtype="http://schema.org/Car" class="item">
<a itemprop="url" href="/ikinci-el/2014-citroen-c-elysee-1-6-hdi-attraction-dizel-manuel-beyaz-376" title="2014 Citroen C-Elyseeİncele">
<img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/4534/_MG_0133.jpg?1506524742" alt="sahibinden satılık araba 2014 Citroen C-Elysee 1.6 HDi Attraction Dizel Manuel 117220 KM">
</a>
<div class="inventroy-content">
<a itemprop="url" href="/ikinci-el/2014-citroen-c-elysee-1-6-hdi-attraction-dizel-manuel-beyaz-376" title="2014 Citroen C-Elyseeİncele">
<h3>Citroen C-Elysee</h3>
<span>2014</span>
<span>Dizel</span>
<span>Manuel</span>
</a>
</div>
</div>
</div><!-- Row /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
<div itemscope="" itemtype="http://schema.org/Car" class="item">
<a itemprop="url" href="/ikinci-el/2015-skoda-octavia-1-6-tdi-style-cr-dizel-otomatik-beyaz-374" title="2015 Skoda Octaviaİncele">
<img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/5208/_MG_0966.jpg?1517238488" alt="sahibinden satılık araba 2015 Skoda Octavia 1.6 TDI Style CR Dizel Otomatik 53000 KM">
</a>
<div class="inventroy-content">
<a itemprop="url" href="/ikinci-el/2015-skoda-octavia-1-6-tdi-style-cr-dizel-otomatik-beyaz-374" title="2015 Skoda Octaviaİncele">
<h3>Skoda Octavia</h3>
<span>2015</span>
<span>Dizel</span>
<span>Otomatik</span>
</a>
</div>
</div>
</div><!-- Row /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
<div itemscope="" itemtype="http://schema.org/Car" class="item">
<a itemprop="url" href="/ikinci-el/2015-skoda-octavia-1-6-tdi-style-cr-dizel-otomatik-siyah-372" title="2015 Skoda Octaviaİncele">
<img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/5183/_MG_0956.jpg?1517237745" alt="sahibinden satılık araba 2015 Skoda Octavia 1.6 TDI Style CR Dizel Otomatik 73000 KM">
</a>
<div class="inventroy-content">
<a itemprop="url" href="/ikinci-el/2015-skoda-octavia-1-6-tdi-style-cr-dizel-otomatik-siyah-372" title="2015 Skoda Octaviaİncele">
<h3>Skoda Octavia</h3>
<span>2015</span>
<span>Dizel</span>
<span>Otomatik</span>
</a>
</div>
</div>
</div><!-- Row /- -->
.inventroy-box {
text-align: center;
margin-bottom: 30px;
}
@media (min-width: 992px)
.col-md-4 {
width: 33.33333333%;
}
img {
max-width: 100%;
height: auto;
}
img {
border: 0;
vertical-align: middle;
}
你能指导我如何解决这个问题吗?
答案 0 :(得分:1)
要使引导类起作用,它们必须包含在<div>
的{{1}}类中。示例:
row
答案 1 :(得分:-1)
这是因为图像或内容的高度不规则。 我想你想要这样的东西: https://prnt.sc/j302vm 我们只是说您正在使用此代码。
<div class='row'>
<div class='col-md-4 col-sm-6 col-xs-12'>
</div>
<div class='col-md-4 col-sm-6 col-xs-12'>
</div>
<div class='col-md-4 col-sm-6 col-xs-12'>
</div>
<div class='col-md-4 col-sm-6 col-xs-12'>
</div>
</div>
所以你需要在右手边的第一个div处清除两个属性。
所以应用这个css:
@media(min-width: 992px){
.col-md-4:nth-of-type(3n+1){
clear:both;
}
}
@media (min-width: 768px) and (max-width:991px){
.col-sm-6:nth-of-type(2n+1){
clear:both;
}
}