Bootstrap网格对齐具有不同高度的col

Question

我对bootstrap网格很新，我试图了解它是如何流动的。

我的项目中有以下侧栏：

当屏幕尺寸变小（xs）时，当侧边栏被推到主要内容下方时，我希望得到这样的流程：

但改为bootstrap这样做：

最后，当小部件1,2和3完全拼凑在一起时，它们应该像原始一样堆叠。

小提琴：https://jsfiddle.net/gm81fg3v/

<div class="container">
    <div id="first_row" class="col-md-12">
        <div id="widget1"class="sibebar_widget col-md-12 col-xs-4">1</div>
        <div id="widget2" class="sibebar_widget col-md-12 col-xs-4">2</div>
        <div id="widget3" class="sibebar_widget col-md-12 col-xs-4">3</div>
        <div id="widget4" class="sibebar_widget col-md-12 col-xs-4">4</div>
        <div id="widget5"class="sibebar_widget col-md-12 col-xs-4">5</div>
    </div>
</div>

.container{border: 1px solid black;}
#content{border: 1px solid green;}
.sibebar_widget{border: 1px solid blue;}
#widget1{height: 20px;}
#widget2{height: 40px;}
#widget3{height: 30px;}

Answer 1

您可能需要通过明确的修复方法使用自适应列重置：http://getbootstrap.com/css/#grid-responsive-resets

<div class="container">
    <div id="first_row" class="col-md-12">
        <div id="widget1"class="sibebar_widget col-md-12 col-xs-4">1</div>
        <div id="widget2" class="sibebar_widget col-md-12 col-xs-4">2</div>
        <div id="widget3" class="sibebar_widget col-md-12 col-xs-4">3</div>
        <div class="clearfix visible-xs-block"></div>
        <div id="widget4" class="sibebar_widget col-md-12 col-xs-4">4</div>
        <div id="widget5"class="sibebar_widget col-md-12 col-xs-4">5</div>
    </div>
</div>

您可以通过JSFiddle查看此工作：http://jsfiddle.net/6yb563m7

注意：所有col应该包含在一行内，以符合正确的bootstrap结构。

Answer 2

只需将您的专栏设置为1 2＆amp; 1.System.Linq.IQueryable.get_Provider()\r\n at System.Linq.Queryable.FirstOrDefault[TSource](IQueryable中的3和您的第4列和第4列5在单独的1 predicate)\r\n at Isolucion.Aplicacion.Implementaciones.ServicioAplicacionUsuario.Autenticar(String nombreUsuario, String contraseña)\r\n at Isolucion.Servicios.WebApi.Controllers.UsuarioController.Login(LoginDto loginDto)\r\n at lambda_method(Closure , Object , Object[] )\r\n at System.Web.Http.Controllers.ReflectedHttpActionDescriptor.ActionExecutor.<>c__DisplayClass13.<GetExecutor>b__c(Object instance, Object[] methodParameters)\r\n at System.Web.Http.Controllers.ReflectedHttpActionDescriptor.ActionExecutor.Execute(Object instance, Object[] arguments)\r\n at System.Web.Http.Controllers.ReflectedHttpActionDescriptor.<>c__DisplayClass5.<ExecuteAsync>b__4()\r\n at System.Threading.Tasks.TaskHelpers.RunSynchronously[TResult](Func中我更新了你的小提琴https://jsfiddle.net/gm81fg3v/1/，当你最后说1 2＆amp; 3应该堆叠...你想要它们堆叠在xs设备上然后4＆amp;它们并排在它们下面？如果是这样，那么你的colums 1 2＆amp; 3应该有一类col-md-12 col-sm-4 col-xs-12

Answer 3

您可以尝试使用第n个子选择器在每第三个元素之后清除浮动。

.sibebar_widget:nth-child(3n+4){
  clear:both;
}    

https://jsfiddle.net/gm81fg3v/2/

Answer 4

我改为使用js插件同位素（砌体）进行编织。 Bootstrap非常令人困惑。