Html div不在同一行中对齐？_Html_Css_Twitter Bootstrap 3

Html div不在同一行中对齐？

html css twitter-bootstrap-3

Html div不在同一行中对齐？,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我有一个引导布局问题，我不知道如何解决在我的页面上，我展示了6辆最近的车，在桌面视图中，我希望每行有3辆车，因此每辆车都位于引导div容器中：col-md-4 col-sm-6 col-xs-12 汽车图像反应灵敏。虽然大小调整后的图像大小相同，但如果汽车的原始分辨率略有不同，我的桌面布局会扭曲，如下图所示下面您可以看到html和css代码 <div class="container">  <div class="

我有一个引导布局问题，我不知道如何解决

在我的页面上，我展示了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 /- -->

你能告诉我如何解决这个问题吗？

这是因为图像或内容的高度不规则。我想你想要这样的东西：假设您正在使用此代码

<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 class="row">
    <div class="col-lg-4 col-sm-6"></div>
    <div class="col-lg-4 col-sm-6"></div>
    <div class="col-lg-4 col-sm-6"></div>
</div>


尝试将图像宽度设置为100%，请在此处添加有意义的代码和问题描述。不要只是链接到需要修复的站点——否则，一旦问题解决或者你链接到的站点无法访问，这个问题将对未来的访问者失去任何价值。发布一个能证明你的问题的帖子会帮助你得到更好的答案。有关更多信息，请参阅“谢谢！”！添加了html和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;
        }
    }

<div class="row">
    <div class="col-lg-4 col-sm-6"></div>
    <div class="col-lg-4 col-sm-6"></div>
    <div class="col-lg-4 col-sm-6"></div>
</div>