div在同一行没有对齐?

时间:2018-04-09 18:23:32

标签: html css twitter-bootstrap-3

我有一个引导布局问题,我无法弄清楚如何解决。

在我的页面上,我展示了6辆最近的汽车,在桌面视图中,我希望每排3辆汽车,所以每辆汽车都位于一个自举式div容器内: col-md-4 col-sm -6 col-xs-12

汽车图片响应迅速。虽然调整大小的图像大小相同,但如果汽车的原始分辨率略有不同,我的桌面布局会扭曲,如下所示。

enter image description here

下面你可以看到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;
}

你能指导我如何解决这个问题吗?

2 个答案:

答案 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;
        }
    }