Bootstrap 列根据移动视图上的标题折叠

Question

我在单个类中使用多个引导列。现在，当标题使用clear:both 时，我实现了列换行。但是当项目没有标题时，移动视图中唯一的问题是无法将列左对齐。这是我的示例代码，我还附上了屏幕供您参考。

my web link
screenshot follow

<div class="itemat htile1 col-xs-12">
<div class="secn-frst1">
    <h4 class="tileh4 a">600mm x 600mm</h4>
    <div class="col-sm-3 col-xs-6 applyclear">
        <p>content</p>
    </div>
    <div class="col-sm-3 col-xs-6 applyclear">
        <p>content</p>
    </div>
    <div class="col-sm-3 col-xs-6 applyclear">
        <p>content</p>
    </div>
    <div class="col-sm-3 col-xs-6 applyclear">
        <p>content</p>
    </div>
    <div class="col-sm-3 col-xs-6 applyclear">
        <p>content</p>
    </div>
    <div class="col-sm-3 col-xs-6 applyclear">
        <p>content</p>
    </div>
</div>

下面写jquery

$(window).on('load resize', function() {
    if ($(window).width() <= 767) {
        //alert();  
        $(".posts.Homogeneous div[class*='htile'] .col-sm-3 .tileh4:has(.versn)").parent().css("clear", "both");
        $(".posts.Porcelain div[class*='htile'] .col-sm-3 .tileh4:has(.versn)").parent().css("clear", "both");
        $(".posts.Ceramic div[class*='htile'] .col-sm-3 .tileh4:has(.versn)").parent().css("clear", "both");

        $(".posts.Homogeneous .htile1 div[class*='secn-frst'] .col-sm-3 .tileh4:has(.versn)").parent().css("clear", "both");
        $(".posts.Porcelain .htile1 div[class*='secn-frst'] .col-sm-3 .tileh4:has(.versn)").parent().css("clear", "both");
        $(".posts.Ceramic .htile1 div[class*='secn-frst'] .col-sm-3 .tileh4:has(.versn)").parent().css("clear", "both");

//div has no title cleat none
    $(".posts.Homogeneous div[class*='htile'] .col-sm-3 .tileh4:has(.vhide)").parent().css("clear", "none");    
    $(".posts.Porcelain div[class*='htile'] .col-sm-3 .tileh4:has(.vhide)").parent().css("clear", "none");
    $(".posts.Ceramic div[class*='htile'] .col-sm-3 .tileh4:has(.vhide)").parent().css("clear", "none");

    } else {
        $(".posts.Homogeneous div[class*='htile'] .col-sm-3 .tileh4:has(.versn),.posts.Homogeneous div[class*='htile'] .col-sm-3 .tileh4:has(.vhide)").parent().css("clear", "none");
        $(".posts.Porcelain div[class*='htile'] .col-sm-3 .tileh4:has(.versn),.posts.Porcelain div[class*='htile'] .col-sm-3 .tileh4:has(.vhide)").parent().css("clear", "none");
        $(".posts.Ceramic div[class*='htile'] .col-sm-3 .tileh4:has(.versn),.posts.Ceramic div[class*='htile'] .col-sm-3 .tileh4:has(.vhide)").parent().css("clear", "none");

        $(".posts.Homogeneous .htile1 div[class*='secn-frst'] .col-sm-3 .tileh4:has(.versn),.posts.Homogeneous .htile1 div[class*='secn-frst'] .col-sm-3 .tileh4:has(.vhide)").parent().css("clear", "none");
        $(".posts.Porcelain .htile1 div[class*='secn-frst'] .col-sm-3 .tileh4:has(.versn),.posts.Porcelain .htile1 div[class*='secn-frst'] .col-sm-3 .tileh4:has(.vhide)").parent().css("clear", "none");
        $(".posts.Ceramic .htile1 div[class*='secn-frst'] .col-sm-3 .tileh4:has(.versn),.posts.Ceramic .htile1 div[class*='secn-frst'] .col-sm-3 .tileh4:has(.vhide)").parent().css("clear", "none");
    }
});

//remove classname row in mobile
$(window).on('load resize', function() {
    if ($(window).width() <= 767) {
        var cnt = $(".posts.Homogeneous .htile1 .row").contents();
        $(".posts.Homogeneous .htile1 .row").replaceWith(cnt);
    }
});

Answer 1

我想我明白你喜欢做什么。如果您添加col-.... 来开发网格布局，请告诉我row 类是强制性的，因为除了padding 之外，它会将col-.. div 包装到row 类。您可以做的是将div 添加为col-... 的子级，并以负值添加margin。

以下是您可以遵循的表示。

HTML 和 CSS：

.mgn-rt-15 { margin-right:-15px; }
.mgn-lt-15 { margin-left:-15px; }
.green-box,
.blue-box { height:150px; }
.green-box { background-color:green; }
.blue-box { background-color:blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>
<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.css" rel="stylesheet"/>

<div class="row">
   <div class="col-xs-6">
      <div class="mgn-rt-15">
         <div class="green-box"></div>
      </div>
   </div>
   <div class="col-xs-6">
      <div class="mgn-lt-15">
         <div class="blue-box"></div>
      </div>
   </div>
</div>