响应式图像和文本对齐

Question

我有一个使用三个col-md-4作为类的站点。 这是代码：

echo '<div class="head6 panel-heading">Local Business Listing</div>
        <div class="panel-body">

    ';

    $funcs->viewSurvey();

    $array4 = $funcs->viewSurvey();
    $searchengine = $array4['searchengine'];
    $sum = $array4['sum'];

    $searches = explode(',', $searchengine);
    $searchesa = array("Google","Yahoo","Bing");

    $check = '<img src="images/checked.png" height="40px" width="40px">';
    $uncheck = '<img src="images/unchecked.png" height="40px" width="40px">';

    foreach ($searchesa as $key_a => $val_c) {

        $found = false;

        echo '<div class="col-sm-4">';

        foreach ($searches as $key_b => $val_d) {
            if ($val_c == $val_d) {
                echo ''.$check.'<h3 class="head6">'. $val_c.'</h3>' ;     
                $found = true;

            }     
        }
        if (!$found){
            echo ''.$uncheck.'<h3 class="head6">'. $val_c.'</h3>' ;

        }

        echo '</div>';
    }

    echo '

    </div>';

当屏幕较小时，它看起来像这样

即使在移动显示器中，如何将其放置在单行中？

Answer 1

即使在移动显示器中，也可以将col-xs-4用于单行。

Answer 2

试试这个 ..将div class panel-body更改为此panel-body col-md-4 col-xs-4

<div class="panel-body col-md-4 col-xs-4">
</div>

希望这对您有所帮助。