html - Bootstrap 移动优先布局问题

Question

请检查我的演示。我一直在尝试实现 this please hover above any plan block对于不同的网格大小，我有一些方法可以使它在除 col-xg(<768px) 之外的所有网格大小下工作。这里悬停时 div 中断并显示不规则行为。下面我添加了我希望 block 呈现的示例 < 768px 网格和悬停 block 必须更改为黑色

这是第二期高度不齐 我正在尝试从头开始构建一个页面，所以请您指出我的错误

FIDDLE

HTML

<div id="Container_Plans">

            <div class="rows">

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


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



                             <div class="products_Container">

                                    <div class="Product_Plan">

                                       <span class="PlanName">
                                            #01
                                       </span>



                                    </div>
                                    <div class="Product_Feature">
                                       <span class="Feature_Content">
                                       <h2>Compact Plan</h2>
                                       <p><span class="break">DDNS Feature for </span>remote viewing </p>

                                        <div>
                                      @ RS 10000 /- 
                                        </div>
                                        free Dns Subscription for a year
                                         </span>
                                    </div>

                            </div>  


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


                            <div class="products_Container">

                                                            <div class="Product_Plan">

                                                               <span class="PlanName">
                                                                    #02
                                                               </span>



                                                            </div>
                                                            <div class="Product_Feature">
                                                               <span class="Feature_Content">
                                                               <h2>Regular Plan</h2>
                                                               <p><span class="break">DDNS Feature for </span>remote viewing  </p>

                                                                <div>
                                                             @ RS 21000 /- 
                                                                </div>
                                                                free Dns Subscription for a year
                                                                </span>
                                                            </div>

                                                    </div>  

                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-3  col-xs-12 ">
                            <div class="products_Container">
                                        <div class="Product_Plan">

                                           <span class="PlanName">
                                                #03
                                           </span>



                                        </div>
                                        <div class="Product_Feature">
                                           <span class="Feature_Content">
                                           <h2>Performance Plan</h2>
                                           <p><span class="break">DDNS Feature for </span>remote viewing </p>

                                            <div>
                                          @ RS 45000 /- 
                                            </div>
                                            free Dns Subscription for a year
                                             </span>
                                        </div>


                            </div>
                        </div>
                        <div class="col-lg-1 col-md-1 col-sm-1">


                        </div>

            </div>


        </div>

Answer 1

看起来背景变化是根据 .products_Container 的悬停 css 规则确定的.尝试为其父项设置规则，col-lg-3 col-md-3 col-sm-3 col-xs-12 ，并为父级提供所需的悬停背景颜色。

这是否实现了您想要实现的目标？

http://jsfiddle.net/sYJKE/2/embedded/result/