Question

我有以下代码：

<div class='carousel'>
    <div class='data-ng-repeat='{{ repeat }}'{% endif %}>
        <div class='col-xs-12 col-sm-3 vdivide valign-wrap' data-ng-repeat='i in items'>
          <div class='valign'>
            <p class='body'>
              <span> {$ i.statistic $} </span>
              <span> {$ i.text $} </span>
            </p>
          </div>
        </div>
       </div>
</div>

使用以下css：

.vdivide:not(:last-child) {
    border-right: 1px solid rgba(196, 187, 159, 0.63);
}
.carousel {
   height: 300px;
}

因此，我有4个柱子，用于分隔它们。当我切换到移动屏幕时，我希望它们很好地叠加。知道我怎么能用bootstrap做到这一点？

Answer 1

除了使用正确的列类名称之外，您不需要做任何其他事情。看看the examples provided：

Bootstrap 3网格系统有四层：xs（手机），sm（平板电脑），md（桌面）和lg（大型桌面）。您几乎可以使用这些类的任意组合来创建更加动态和灵活的布局。

每层课程都会向上扩展，这意味着如果您计划为xs和sm设置相同的宽度，则只需指定xs。

因此，对于桌面上的4列（在其他地方堆叠），只需在重复的div上使用.col-xs-12.col-sm-3，即可删除$("#myBtn").click(function () { var myId = 123; var myValues = “1,A,1/01/2014;2,B,2/02/2014; ……. ”; // string of about 10K characters var actionUrl = '@Html.Raw(@Url.Action("DownloadMyFile", "Home", new { parm1 = "PLACEHOLDER1", parm2 = "PLACEHOLDER2" }))'; var url1 = actionUrl.replace('PLACEHOLDER1', myId); var url2 = url1.replace('PLACEHOLDER2', myValues); window.location = url2; });。

注意：我真的建议您不要在列中添加自己的表示CSS类。保持网格完全分离，并在内部添加额外的标记以实现相同的目标：您将使自己的生活变得更加简单。

Bootstrap：强制列在移动设备上垂直堆叠（响应式设计）

1 个答案: