如何用php更改bootstrap列的reponsive布局?

时间:2017-03-31 21:25:56

标签: php html css wordpress twitter-bootstrap

我对php和wordpress很新,需要帮助。我试图用php改变我的bootstrap响应网格。 > 992px我应该有3列,> 768px我应该只有2列和< 767px我应该只有一列。我怎么能用PHP做到这一点?真的很感激帮助。

这是我的代码:

<div class="row">

    <?php $i = 1; while(have_posts()) : the_post();?>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="cover-card">
            <?php the_post_thumbnail('full', array('class' => 'image img-responsive')); ?>

            <div class="overlay">
                <div class="text">
                  <strong><?php the_title(); ?></strong>
                  <?php the_content(); ?>
                  <a href="<?php the_permalink(); ?>" class="btn btn-primary">Comprar</a>
                </div> <!-- /.text -->
            </div> <!-- /.overlay -->
        </div> <!-- /.cover-card -->
    </div> <!-- /.col-md-4 -->

<?php if ( $i % 3 === 0 ) { echo '</div> <!-- /.row -->

<div class="row">'; } ?>
<!-- store item -->
<?php $i++; endwhile; wp_reset_query(); ?>

</div>

这是我在sm分辨率上循环时发生的事情: enter image description here

1 个答案:

答案 0 :(得分:0)

Sub Degree_Workbook_Names_major1()
Dim abbrRange As Range
Dim Abbr, Dept()
Dim lr As Long, i As Long

With Application
    .Calculation = xlCalculationManual
    .EnableEvents = False
    .DisplayAlerts = False
    .ScreenUpdating = False
End With

lr = Cells(Rows.Count, "H").End(xlUp).Row
Columns("I").Insert
Range("I1").Value = "DeptName"

Set abbrRange = Range("H2:H" & lr)
Abbr = abbrRange.Value
ReDim Dept(1 To lr)

For i = 1 To UBound(Abbr, 1)
    Select Case UCase(Abbr(i, 1))
        Case "ACC"
            Dept(i) = "Department of Accounting"
        Case "ACS"
            Dept(i) = "Department of Adolescent, Career and Special Education"
        Case "AES"
            Dept(i) = "Department of Animal and Equine Science"
        Case "AGR"
            Dept(i) = "Department of Department of Agricultural Science"
        Case "AHS"
            Dept(i) = "Department of Applied Health Science"
        Case "AHT"
            Dept(i) = "Department of Veterinary Technology and Pre-Veterinary Medicine"
        Case "ART"
            Dept(i) = "Department of Art and Design"
        Case "BIO"
            Dept(i) = "Department of Biology"
        'similarly add rest of the Abbreviations with Case statement and set the array Dept as shown above
    End Select
Next i
Range("I2").Resize(UBound(Dept)).Value = Application.Transpose(Dept)

With Application
    .Calculation = xlCalculationAutomatic
    .EnableEvents = True
    .DisplayAlerts = True
    .ScreenUpdating = True
End With

End Sub

网格系统的基础是有12列。在文档中,它将描述xs,sm,md和lg类的宽度。

上述解决方案应该可行,因为如果显示器大于992px,则每行将放置三张卡,如果大于768px则为2,如果更少则为1。

这是a little example