1

我正在制作一个在最右边有两个块引用的网站。我正在使用Bootstraps 3.0，并且引号与关于公司的描述文本块位于同一行。

当我将屏幕大小重新调整为小于 768 像素时，引号会从网格中清除并填满屏幕的整个宽度。我想jQuery用来关闭带有描述的行并为移动屏幕的引号添加一个新行，然后删除.col-md-3该类并将其更改为.col-sm-6（或col-xs-6）两个引号divs，每个都有一个 id#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告诉我。

4

1 回答 1

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-*)，此网格在 991 像素以上成为水平网格。您的 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'));
 }
});
于 2013-10-01T07:15:53.820 回答