在調整大小後添加新行和更改列類

Question

我正在製作一個網站，在最右側有兩個塊引號。我正在使用Bootstraps 3.0，引號與公司的說明文字塊位於同一行。

當我將屏幕大小重新調整到小於768px時，將清除網格的引號並填充屏幕的整個寬度。我想使用jQuery關閉帶描述的行，併爲手機屏幕的報價添加一行，然後刪除.col-md-3類並將其更改爲.col-sm-6（或col-xs-6），這兩個報價均爲divs，每個報價爲#quote1和#quote2，然後關閉新的行。

這將允許描述文本填充整個移動屏幕，同時在其下面的一行中的兩個單獨的列中具有引號。繼承人的代碼，我到目前爲止...

HTML：

<div class="row main-desc"> 
    <div class="col-md-7 col-md-offset-1"> 
    <h3 class="secondFont txtburgundy">Events/News</h3> 
    <p class="firstFont 18pt txtlightburgundy"> 
    There is currently no new news at this time. 
    </p> 
    <hr /> 
    <p class="firstFont 18pt indentText"> 
    <span class="emph indent">W</span>elcome to Sticks and Stones Construction and Landscaping! We are a family run business that exists to create unique and functional living spaces in Charlottesville, Virginia and the surrounding counties. We specialize in new home construction, remodeling, sustainable structures, patios, walkways, retaining walls, indoor/outdoor living spaces & kitchens, irrigation systems, landscape design, installation and maintenance. We cater to those who appreciate beauty and quality in and out of the home. The creativity, experience and pride we put into each project results in an exquisite finished product that is sure to exceed all expectations. Sticks and Stones thrives on making your dream a reality. 
    </p> 
    </div> 
    <div id="quote1" class="col-md-3 quotes"> 
     <div class="secondFont 14pt quote index_quote"> 
      <div class="index_quote_img"></div> 
       <blockquote> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
       </blockquote> 
        <div class="secondFont 12pt italic quoteAuthor"> 
         <p>-Jacob Buller</p> 
        </div> 
       </div> 
      </div> 
     <div id="quote2" class="col-md-3 quotes"> 
       <div class="secondFont 14pt quote index_quote"> 
      <div class="index_quote_img"></div> 
       <blockquote> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
       </blockquote> 
        <div class="secondFont 12pt italic quoteAuthor"> 
         <p>-Jacob Buller</p> 
        </div> 
        </div> 
      </div> 
     </div> 
     </div> 

jQuery的：在瀏覽該網站時

<script type="text/javascript"> 
$(document).ready(function() { 
     if (window.width() < 768) { 
      $('</div><div class="row">').insertBefore('#quote1'); 
      $('#quote1').addClass('col-sm-6').removeClass('col-md-3'); 
      $('#quote2').addClass('col-sm-6').removeClass('col-md-3'); 
      $('</div>').insertBefore('.sticksFooter'); 

     } 
     else {} 
    }); 
$(window).resize(function() { 
     if (window.width() < 768) { 
      $('</div><div class="row">').insertBefore('#quote1'); 
      $('#quote1').addClass('col-sm-6').removeClass('col-md-3'); 
      $('#quote2').addClass('col-sm-6').removeClass('col-md-3'); 
      $('</div>').insertBefore('.sticksFooter'); 

     } 
     else {} 
    }); 
</script> 

現在我沒有看到任何類更改或添加divs一個瀏覽器。如果你需要我做一個jsFiddle只是讓我知道。

Answer 1

您不必添加新行。你的情況，你可以使用類似：

<div class="container"> 
    <div class="row main-desc"> 
     <div class="col-xs-12 col-md-7 col-md-offset-1"></div> 
     <div id="quote1" class="col-xs-6 col-md-3 quotes"> 
     <div id="quote2" class="col-xs-6 col-md-3 quotes"></div> 
    </div> 
</div> 

而且看一看的例子在http://getbootstrap.com/css/#grid-example-mixed-complete

在你的示例代碼使用中電網（col-md-*）該網格成爲horizo​​tal上面991px。您的JavaScript將在768像素以下觸發。在這個例子中，你會錯過768和992像素之間的情況（小網格與col-sm-*）。

在我上面的代碼中，我使用col-xs，額外的小網格。這個網格永遠不會堆疊。所以在992px下，報價在50％寬度欄的「新」行中。

更新 關於（你）的jQuery

1. window.width()將無法​​正常工作使用$(window).width()
2. insertBefore嵌入式標籤，包括關閉標籤所以</div><div>將無法​​正常工作或不打算
3. 當您調整大小768以下col-sm-*將不會被應用。

嘗試類似：

$(window).resize(function() 
{ 
if ($(window).width() < 768) 
{ 
    var $foo = $('<div />').addClass('row').insertAfter('.col-md-7') 
    .append($('#quote1').addClass('col-xs-6').removeClass('col-md-3')) 
    .append($('#quote2').addClass('col-xs-6').removeClass('col-md-3')); 
} 
});