响应式图像和文本对齐

Question

I have a site that uses three col-md-4 as a class. This is the code:

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>';

When the screen is smaller it appears like this

how can I place it in single line still even in a mobile display?

Answer 1

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

Answer 2

Try This .. Change div class panel-body to this panel-body col-md-4 col-xs-4

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

Hope this could you help you.