Question

使用bootstrap处理变量高度行似乎很有挑战性，同时在CSS中保持响应。在这种情况下，根据数据库中可用的内容，可变数量的文章将以4或更少的集合加载到轮播中。

这会导致下面的所有内容随着文章行高度的变化而跳转。

如果我使用相对定位或div的设定高度，可能会导致CSS流量在不同的屏幕尺寸上出错。比如在电话上，当转盘加载一列4列，而不是2列2列时，需要增加高度。我需要在媒体查询CSS附加文件中使用某种最小高度，但是，我无法获得min-height来点击此引导轮播的任何div。

<!-- Articles -->

    <div id="articles" class="padding-bottom padding-top-two">
        <div class="container">
            <div class="row"> <!-- Articles. -->
                <div class="col-lg-12">
                    <div class="section-title">
                        <h1>Articles</h1>
                    </div>                  
                    <div id="articles-carousel" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#articles-carousel" data-slide-to="0" class="active"></li>
                            <li data-target="#articles-carousel" data-slide-to="1"></li>
                            <li data-target="#articles-carousel" data-slide-to="2"></li>
                            <li data-target="#articles-carousel" data-slide-to="3"></li>                            
                        </ol>
                        <div class="carousel-inner">

                        <!-- Begin Loop -->
                            <!-- Every 4th post item && row, First one active -->
                            <div class="item active">
                                <div class="row">

<?php   
$stmt = $db->prepare("sql_string");
$stmt->execute();
if ($stmt->bind_result($VARIABLES))             
{
    $DIVCLOSE = true;
    while($stmt->fetch())
    {       
        ((**ommitted variable load section**))

        if($m == 4 || $m == 8 || $m == 12 || $m == 16)
        {
            echo "<div class='item'>";
            echo "<div class='row'>";
            $DIVCLOSE = true;
        }

        echo "<div class='col-sm-6'>\n";
        echo "<div class='single-post'>\n";
        echo "<div class='pull-left post-image'>\n";

        $Photo = "page_pics/$PICTURE";

        if(!file_exists($Photo) || $PICTURE == "")
                    $Photo = "images/placeholder.png";

            if(file_exists($Photo))
            {   
                    //$imgsize = getimagesize($Photo); 
                    //$intHeight=$imgsize[1];
                    //if($intHeight > 125)                  
                        //echo "<div style='height:125px;overflow:hidden'>\n";

                    echo "<a href='articles.php?item=$HEADER_URL&AID=$ID' alt='$HEADER'><img src='$Photo' class='img-responsive' style='width:auto;height:10%; float:right;' alt='$HEADER'/></a>\n";

                        //echo "</div>\n";                                  
            } // if pic exists
        /*  else
            {
                echo "<a href='articles.php?item=$HEADER_URL&AID=$ID' title='$HEADER' alt=$HEADER><h5 style='width:auto;height:25%; color:#454545;'><font style='color:#454545;'>$HEADER</font></h5></a>\n";                                                
            }
        } // if pic != ""
    }
        else
        {
                echo "<a href='articles.php?item=$HEADER_URL&AID=$ID' title='$HEADER' alt=$HEADER><h5 style='width:auto;height:25%; color:#454545;'><font style='color:#454545;'>$HEADER</font></h5></a>\n";                                                
        } */


        echo "<i class='fa fa-angle-right'></i></a>\n";
        echo "</div>\n"; //.div class pull-left

        echo "<div class='pull-right post-details'>\n"; 
        echo "<a href='article_read.php?item=$HEADER_URL&AID=$ID' title='$HEADER, $ALT'><h5>$HEADER</h5></a>";

        echo "<p style='min-height:15%; max-height:15%'>$CONTENT";
        //if($CATEGORY!=$savedCat)
        echo "<h5>($CATEGORY)</h5>\n";
        echo "</p>";

        echo "</div>\n"; //div class pull-right
        echo "</div>\n"; //div class single-post
        echo "</div>\n"; //div class col-sm-6


        if($m == 3 || $m == 7 || $m == 11 || $m == 15 || $m == 19)
        {
            echo "</div>"; //item
            echo "</div>"; //row
            $DIVCLOSE = false;
            //echo "2222\n";                    
        }


    }

    if($DIVCLOSE)
    {
        echo "</div>"; //item
        echo "</div>"; //row            
    }
}

?>


                        </div><!-- /.carousel-inner -->
                    </div> <!-- /.articles-carousel -->                     
                </div><!-- /.col-md-10 End of articles -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </div><!--/#recent-posts Articles-->

<!-- End Articles →

Answer 1

创建一个用于设置图像高度和宽度的类。然后，您可以将该类添加到每个<li>标记中。

Bootstrap CSS行的高度变化导致跳跃和放大以下所有内容的可用性问题

1 个答案: