Question

我的想法是，如果我使用container类它可以放大和缩小，但它没有响应。如果我使用container-fluid类它适用于响应，但它不适用于放大或缩小。如何让这项工作做出响应以及放大或缩小？这是HTML代码的一部分：

<div class="container-fluid">
        <div class ="row">
              <div class="col-xs-3"></div>
              <div class="col-xs-6">
                    <div class="row svu-info1">
                        <div class="col-xs-6 col-sm-6 svu-info1-text1">
                            <p class="text-header">&Icirc;nve&#539;i, te consul&#539;i, faci schimb de cuno&#x219;tin&#539;e, te specialiezi! </p>

                            <p class="text-body"><span class="p-header"></span> este un program intern care 
                            ofer&#259; posibilitatea tuturor colegilor s&#259; se dezvolte 
                            profesional. Este un centru de cuno&#x219;tin&#539;e &#x219;i expertiz&#259;, 
                            este locul unde ne ajut&#259;m reciproc &#x219;i unde &#238;ntreb&#259;rile
                            noastre &#238;&#x219;i g&#259;sesc r&#259;spunsul.</p>
                        </div>
                        <div class="col-xs-6 col-sm-6 bg-img1">
                            <!-- <img src ="<?php echo Yii::app()->getBaseUrl(); ?>/images/pages/svu/img_svu_1.jpg" alt="img_svu_1"> -->
                        </div>
                    </div>
              </div>
              <div class="col-xs-3"></div>

        </div> 
        <div class ="row  bg-white">
              <div class="col-xs-3"></div>
              <div class="col-xs-6">
                    <div class="row svu-info2">
                          <div class="col-xs-6 col-sm-6 svu-info2-text2">
                             <p class="">TEST University include 10 comunit&#259;&#539;i tehnice,</p>
                             <p class="">fiecare dintre ele av&#226;nd un decan - coordonator &#x219;i un nucleu tehnic</p>
                          </div>
                          <div class="col-xs-6 col-sm-6">
                             <div class="row elements1">
                                 <div class="col-xs-4 col-sm-4 first">.NET</div>
                                 <div class="col-xs-4 col-sm-4 second">
                                    <!-- <img src="<?php echo Yii::app()->getBaseUrl(); ?>/images/pages/svu/img_svu_android.png" alt="" /> -->
                                 </div>
                                 <div class="col-xs-4 col-sm-4 third">ANDROID</div>
                             </div>
                          </div>
                    </div>
              </div>
              <div class="col-xs-3"></div>
        </div>

        <div class ="row  bg-white">
              <div class="col-xs-3"></div>
              <div class="col-xs-6">
                    <div class="row">
                         <div class ="col-xs-2 bg-img2">
                            <!-- <img src="<?php echo Yii::app()->getBaseUrl(); ?>/images/pages/svu/img_svu_ios.png" alt="" /> -->
                        </div>
                        <div class ="col-xs-10  elements2">
                            <div class="row row1">
                                     <div class="col-sm-2 elem1">IOS</div>
                                     <div class="col-sm-2 elem2">
                                        <!-- <img src="<?php echo Yii::app()->getBaseUrl(); ?>/images/pages/svu/img_svu_pm.png" alt="" /> -->
                                     </div>
                                     <div class="col-sm-2 elem3">PM</div>
                                     <div class="col-sm-2 elem4">C/C++</div>
                                     <div class="col-sm-2 elem5">DataBase</div>
                            </div>
                            <div class="row row2">
                                     <div class="col-sm-2 elem1">DevOps</div>
                                     <div class="col-sm-2 elem2">Java</div>
                                     <div class="col-sm-2 elem3">QA</div>
                                     <div class="col-sm-2 elem4">
                                        <!-- <img src="<?php echo Yii::app()->getBaseUrl(); ?>/images/pages/svu/img_svu_qa.png" alt="" /> -->
                                     </div>
                                     <div class="col-sm-2 elem5">WEB</div>
                            </div>
                        </div>
                    </div>
              </div>
              <div class="col-xs-3"></div>
        </div>
     </div>

Answer 1

您可以在div中同时提供container和container-fluid课程。例如<div class="container-fluid container">。也许它会为你工作。

Bootstrap响应问题

1 个答案: