使用引导程序进行响应式布局

Question

    <div class="jumbotron vertical-center bgpurpletextoffwhite"> 
        <div class="container">
            <div class="row">
                <div class="col-xs-2 col-sm-5 col-md-5">
                </div>
                <div class="col-xs-3 col-sm-1 col-md-1">
                  <img src="./assets/images/pmflogo-transparent.png"/>
                </div>
                <div class="col-xs-7 col-sm-6 col-md-6">
                 <br>
                    <h3>Put Me First </h3>
                </div>
           </div>

这是我的代码。 我希望它对所有设备都具有响应能力，但目前不响应。 为了使其具有响应性，我需要做哪些更改。

Answer 1

如果您正在使用引导程序并且您的代码正确，那么它应该是响应式的。 您的代码中还缺少2个div结束标记</div> 。

这是一个小提琴： https : //jsfiddle.net/jaephoenix/h86mabte/

您的代码应如下所示：

<div class="jumbotron vertical-center bgpurpletextoffwhite"> 
    <div class="container">
        <div class="row">
            <div class="col-xs-2 col-sm-5 col-md-5">
            </div>
            <div class="col-xs-3 col-sm-1 col-md-1">
                <img src="s30.postimg.org/ozhb3rw8t/pmflogo.png"/>
            </div>
            <div class="col-xs-7 col-sm-6 col-md-6">
                <br />
                <h3>Put Me First </h3>
            </div>
        </div> <!-- Close div for .row -->
     </div> <!-- Close div for .container -->
</div> <!-- Close div for .jumbotron -->