奇怪的Bootstrap响应问题

有一个奇怪的问题，我第一次使用Bootstrap页面设计。奇怪的Bootstrap响应问题

我有三行，每行四列，中视图。我使用（<）div class =“col-sm-6 col-md-3”（>）将它们折叠成两列列。

第一排和第三排都很好。但第二行没有正确折叠。这些列是歪斜的，并不是并排地合并成一行。

这发生在两页上。只有中间一行受到影响。

任何想法都会有所帮助。

更新：

感谢您的小提琴，讨论和DUH时刻！他们非常需要。

我一起工作的原始格式为：

<div class="row"> 
    <div class="col-sm-6 col-md-3">1</div> 
    <div class="col-sm-6 col-md-3">2</div> 
    <div class="col-sm-6 col-md-3">3</div> 
    <div class="col-sm-6 col-md-3">4</div> 
</div>

JSFiddle

来源

2014-11-25 newneub

你能提供所有的代码？更好的是在http://jsfiddle.net/。 – Jonnerz 2014-11-25 14:36:33

使用'col-sm-6'类在同一行中有4列是不应该做的。无论大小（xs，sm，md等）如何，一行中的所有数值都应该合计为12（不是24）。 – esvendsen 2014-11-25 14:41:42

@griswoldo好的呼叫。认为我试图在没有嵌套div的情况下嵌套div。如果那有意义的话。 – newneub 2014-11-25 14:48:52

大厦在我的评论，你可以使用Bootstrap helper classes解决您的问题。没有看到你的实现，很难说这是否是最好的想法，因为你应该明智地使用这些帮助类。鉴于此，您可以将您的列分解分成独立的div。代码及以下小提琴：

<div class="container visible-md visible-lg"> 
    <div class="row"> 
     <div class="col-md-3">Col 1</div> 
     <div class="col-md-3">Col 1</div> 
     <div class="col-md-3">Col 1</div> 
     <div class="col-md-3">Col 1</div> 
    </div> 
</div> 
<div class="container visible-xs visible-sm"> 
    <div class="row"> 
     <div class="col-sm-6">Col 1</div> 
     <div class="col-sm-6">Col 2</div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-6">Col 3</div> 
     <div class="col-sm-6">Col 4</div> 
    </div> 
</div>

JSFiddle here

来源

2014-11-25 14:50:31 esvendsen

你正在做很多额外的工作。 http://jsfiddle.net/degoeym/x9mq5289/ – MattD 2014-11-25 15:05:56

正是我想要做的。但在第二排中断。 – newneub 2014-11-25 15:12:06

@MattD看到我对OP的问题的评论。在一行中有4个“col-sm-6”类是一个坏主意。 – esvendsen 2014-11-25 15:19:39

奇怪的Bootstrap响应问题

回答

相关问题