响应式图片和文字对齐

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>

希望你能帮到你。