将 Bootstrap 列相互堆叠

本文介绍了将 Bootstrap 列相互堆叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用 Bootstrap v3 来开发我的界面.我使用以下代码段:

<div class="col-sm-4 col-xs-4"><h1>你好...！</h1><p>第1段</p>

<div class="col-sm-8 col-xs-8"><h1>新的div</h1><p>第2段</p>

但是，当我减小浏览器的大小(宽度)时，列会变得越来越小.我希望，在某个限制或最小宽度之后，div 必须相互堆叠而不是变小.

解决方案

按照此链接了解 xs 和 sm 的列/网格的确切大小，getbootstrap/css/#grid-example-mixed您正在使用自定义宽度功能

这会根据设备尺寸提供自定义宽度.而不是默认情况下将列堆叠起来，只需使用此

代替 xs(xtra small) 和 sm(small size)，默认使用中等大小，bootstrap 将完成你剩下的工作.另一件事，您的列(4 和 8)也有两种不同的大小，视图将是不规则的.还有一件事，如果您想继续使用自定义列的大小而不是我的方法，请记住这一点:xs-4 与 sm-4 不同

I am using Bootstrap v3 to develop my interface. I use following snippet:

<div class="row"> <div class="col-sm-4 col-xs-4"> <h1>Hello...!</h1> <p>Para 1</p> </div> <div class="col-sm-8 col-xs-8"> <h1>new div</h1> <p>Para 2</p> </div> </div>

However, when I decrease the size(width) of browser, the columns get smaller and smaller. I want that, after a certain limit or min-width, the divs must stack over one another instead of getting smaller.

解决方案

Follow this link for exact sizes of columns/grids for xs, and sm, getbootstrap/css/#grid-example-mixed You are using a custom width functionality by using

<div class="col-sm-4 col-xs-4" >

This gives custom width based on the device size. Instead for the columns to get stacked over by default just use this

<div class="col-md-4">

instead of xs(xtra small) and sm(small size), use medium size as default, bootstrap will do the rest of your work. And another thing, there is also two different size for your columns(4 and 8), the view would be irregular. And another thing, if you want to continue using custom sizes for columns instead of my method, remember this : xs-4 is different as sm-4