php - Bootstrap 列根据移动 View 上的标题进行总结

Question

我在单个类中使用多个 Bootstrap 列。现在，我使用 clear:both 实现了在有标题时进行列环绕。但是移动 View 中唯一的问题是当元素没有标题时无法将列左对齐。这是我的示例代码，我还附上了屏幕供您引用。

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>