我正在使用Bootstrap.

我有一个包含2或3个基于iframe的嵌入视频的文字.

此数据从数据库中获取.

如何让这些iframe响应？

示例代码:

<div class="row">

   <div class="col-lg-12 col-md-12 col-sm-12">

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe>

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe>


     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe> 

   </div>

</div>

这是一个动态数据.我怎样才能使其响应？

目前,在Bootstrap 3中设置选项卡时,选项卡不响应.

这个:

变成这样:

CSS.修复它的外观很容易,只需在最大宽度处移除浮子等.但是,内容与选项卡脱节,因此一堆选项卡将像标签一样工作,但在较小的视口上,您可能会看到内容的变化,也可能看不到内容的变化.

这是制作标签式导航的基本html:

      <!--begin tabs going in wide content -->
       <ul class="nav nav-tabs" id="maincontent" role="tablist">
          <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
          <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
          <li class="dropdown">
             <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
             <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li>
                <li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li>
             </ul>
          </li>
       </ul><!--/.nav-tabs.content-tabs -->


       <div class="tab-content">

          <div class="tab-pane fade in active" id="home">
             <p>Home Content : ...</p>
          </div><!--/.tab-pane -->

          <div class="tab-pane fade" id="profile">
             <p>Profile Content : ...</p>
          </div><!--/.tab-pane -->

          <div class="tab-pane …

这个:

在较小的视口上转到此:

我认为它看起来很令人讨厌,它也占用了很多空间.

这是标准的分页html:

<div class="container">
       <div class="text-center">
          <ul class="pagination pagination-lg">
             <li><a href="#">&laquo;</a></li>
             <li><a href="#">1</a></li>
             <li><a href="#">2</a></li>
             <li><a href="#">3</a></li>
             <li><a href="#">4</a></li>
             <li><a href="#">5</a></li>
             <li class="disabled"><span>...</span></li>
             <li><a href="#">12</a></li>
             <li><a href="#">13</a></li>
             <li><a href="#">14</a></li>
             <li><a href="#">15</a></li>
             <li><a href="#">16</a></li>
             <li><a href="#">&raquo;</a></li>
          </ul>
       </div>
    </div>

现在,我可以使用它们提供的类的较小版本,但是所有东西 - 无论如何 - 都应该对胖手指友好,因为有些触摸设备和桌面设备一样大.

我在StackOverflow上的代码示例中看到类似下面的内容,甚至在销售主题中也看到了(从未在Bootstrap的示例中).

<div class="container">
  <div class="row">
    <div class="col-xs-12">
       <p>Words go here</p>
     </div>
    </div>
  </div>

要么

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
       <p>Words go here</p>
     </div>
    </div>
  </div>

它驱使我疯狂,因为根据Bootstrap自己的文档和常识,两者都不适用于全宽单列.

你什么时候实际使用网格系统？什么col-*-12时候发挥作用？

我正在使用Bootstrap Modal Window插件,它的工作正常,但我想打开另一个模型窗口,当我点击下一个并关闭第一个.我该怎么做？

$('[data-toggle="modal"]').click(function(e) 
    {
        e.preventDefault();
        var url = $(this).attr('href');
        if (url.indexOf('#') == 0)
        {
            $(url).modal('open');
        } 
        else 
        {
            $.get(url, function(data) 
            {
                $(data).modal();
            }).success(function() { $('input:text:visible:first').focus(); });
        }
    });

<a href="next.html" data-toggle="modal">Add Record</a>

next.html文件代码

<div class="modal fade" id="compose-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">First Window</h4>
            </div>
            <form action="#" method="post">

                <div class="modal-footer clearfix">
                    <button type="button" data-dismiss="modal">Discard</button>

                    <button type="submit">Submit</button>
                     <a href="next2.html" data-toggle="modal" >Next</a>
                </div>
            </form>
        </div>
    </div>
</div>

我已经使用bootstrap为下拉控件创建了一个工具提示.它显示了工具提示.但由于此控件在class="col-sm-4"工具提示内部绑定,因此文本将被分解为新行.但我希望能在一行中表明这一点.有什么想法吗？

<div class="col-sm-4">
                <select class="form-control" id="ddlSchoolAttended" data-toggle="tooltip" data-placement="right" title="Some tooltip 2!Some tooltip 2!Some ">
          <option value="08">08 -Year 8 or below</option>
    <option value="09">09 -Year 9 or equivalent</option>
    <option value="10">10 -Completed Year 10</option>
    <option value="11">11 -Completed Year 11</option>
    <option value="12">12 -Completed Year 12</option>
    <option selected="selected" value="">--Not Specified--</option>
          </select><br/>
</div>

在Wordpress Woocommerce中,我创建了一个分组产品,其中包含许多子产品(子产品).我尝试到处搜索,但我找不到一个可行的解决方案,如何通过SKU或产品名称来订购它们.似乎它的orderby仅由"菜单顺序"生成.虽然由于我在这些多个分组产品中有30多个子产品,但是按照菜单顺序值来订购它们将非常浪费时间.

我尝试了以下代码,但似乎它在WC 2.5中有效,但不是3.0+.

add_filter( 'woocommerce_grouped_children_args', 
'so_22661392_grouped_children_args' );

function so_22661392_grouped_children_args( $args ){

 $args['meta_key'] = 'sku';
 $args['orderby'] = 'meta_value';
 $args['order'] = 'ASC'; 
 return $args;

 }

我还搜索了谷歌的解释,但找不到任何解释.我试图清除瞬态,这不起作用:

  WooCommerce>System Status>Tools>Clear Transients

可以在https://plastmet.ee/uus/toode/umartoru-kork-zzo-pealekaiv/上查看分组的产品.html表应与下面的子项匹配,但事实并非如此.儿童SKU是"563/9005","567/9005"等.

任何帮助将不胜感激!

我很难过.已经设置了砌体部件,但无法理解为什么过滤不起作用.我已经阅读过脚本,与演示网站上的那个相比,我疯了.

我正在使用:https://github.com/Vestride/Shuffle和Bootstrap 3.这可能与Bootstrap无关.

DEMO w/edit:http://jsbin.com/vaquci/1/edit

演示:http://jsbin.com/vaquci/1/

HTML包含所有依赖项:: jQuery 1.9.1或更高版本,Modernizr等,

HTML

<div class="container">

     <div class="filter-options">
      <button class="btn btn-default" data-group="wallpaper">Wallpapers</button>
      <button class="btn btn-default" data-group="graphics">Graphic Design</button>
      <button class="btn btn-default" data-group="photography">Photos</button>
      <button class="btn btn-default" data-group="3d">3D Renders</button>
    </div>      



<div id="grid" class="row">
    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
       <img src="http://placehold.it/400x534" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x566" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
        <img src="http://placehold.it/400x600" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" …

使用Bootstrap 3.2,我有一个网站的部分有三个div(.col-lg-3 box),其中包含不同数量的文本.我希望它们都延伸到包含div(.row)的底部.我正在使用的CSS文件的链接在这里:https://github.com/ttmjason/GazoomTravel/blob/master/css/bootstrap.css.

我在Stack Exchange上看到的这个一般性问题(容器中相同的高度div)的答案要么不使用Bootstrap,要么具有过时的语法.如果你能把我链接到一个完全反映我的SxE问题,我很乐意接受这些问题来换取答案.

 <div class="container-fluid join">
  <h2 class="text-center white-heading" id="join-ita"><strong>Join ITA</strong></h2>
  <!-- <hr class="line-black"> -->
  <div class="row">

    <div class="col-lg-3 box">
        <div>
          <h3 class="text-center blue-heading">Newcomers Begin Here</h3>
        </div>
    <p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own <span class="emphasis-blue">GaZoom</span> personalized website, with product and software training as well as mentoring. You will have at your fingertips all …

我刚刚开始学习bootstrap,我正在这个页面上使用他们的例子http://getbootstrap.com/examples/offcanvas/

如您所见,如果您转到该页面,则导航将向左对齐.我试图使用我在普通CSS中所做的事情,这是:

margin-right:auto 和 margin-left:auto

我也试过了

text-align:center

这些都没有用,我已经阅读了他们的导航文档,我不明白我在这里做的不同之处.

以下是该导航页面的代码.我试图将标签一次性放入所有4个导航容器中:

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header" >
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse" style="height: 1px;margin: auto;text-align: center;">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div>