如何使用引导网格系统，使其堆栈在480 to以下

Question

我一直在试图解决这个问题，但似乎找不到任何有关这方面的消息。曾经读过很多旧的帖子，人们正在对文件进行“修改”，并制作自己的col-ms (中小型)，堆叠在480到768之间。

所有这些帖子都是从2013年回来的，所以我有什么办法可以让它在480 it上堆叠吗？我想让我在页脚中创建的3列堆栈在480 or以下或480-768之间。曾经尝试过不同的-xs-4和md你可以命名它，但然后它堆叠在768，甚至没有堆叠在一起。

我的代码：

<div class="container">
                <div class="row">
                    <div class="footerpadding">
                        <!-- Contact us form -->
                        <div class="col-4 col-sm-4">
                            <div class="footerheadline">
                                <h5>ABOUT US</h5>
                                <hr />
                            </div>
                            <div class="footercontent">
                                <a runat="server" href="~/company.aspx">Company</a><br />
                                <a runat="server" href="~/press.aspx">Press</a><br />
                                <a runat="server" href="~/aboutus.aspx">About Us</a><br />
                                <a runat="server" href="~/media.aspx">Media</a><br />
                                 <a runat="server" href="~/gallery.aspx">Gallery</a><br />
                            </div>
                        </div>

                        <div class="col-4 col-sm-4">
                            <div class="footerheadline">
                                <h5>CONTACT & SUPPORT</h5>
                                <hr />
                            </div>
                            <div class="footercontent">
                                <a runat="server" href="~/Support.aspx">Customer Support</a><br />
                                <a runat="server" href="~/questions.aspx">Questions & Answers</a><br />
                                <a runat="server" href="~/cancel.aspx">Cancel resevation</a>
                            </div>
                        </div>
                        <!-- Follow -->
                        <div class="col-4 col-sm-4">
                            <div class="footerheadline">
                                <h5>FOLLOW US!</h5>
                                <hr />
                            </div>
                            <div class="footercontent">
                                <ul>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a>
                                    </li>
                                    <li><a href="#"><i class="fa fa-facebook"></i></a>
                                    </li>
                                    <li><a href="#"><i class="fa fa-youtube"></i></a>
                                    </li>
                                    <li><a href="#"><i class="fa fa-linkedin"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 

那么有什么简单的方法吗?希望有人能帮忙。

Answer 1

Mikkel嗨。要让它在上堆栈，480 it 只需添加一个媒体断点并创建一个col-xxs-12类，并将该类设置为100%宽度。

您还必须使用col-xs-4的引导类，而不是col-sm-4。

删除边框，我添加了这个只是为了图像演示。

看一看小提琴。

@media(max-width:480px)  {     
.col-xxs-12 {
    width: 100%;
}
}

​

​