css列计数：列内容正在打破内部div

我想使用CSS列计数功能，但是我遇到了一些奇怪的行为。css列计数：列内容正在打破内部div

列内容被破坏。

我使用引导3，并正尝试与引导面板来填充列。但是，当按CSS列数计数时，面板会被破坏/分裂。

我试过在另一个div标签中包装面板，但这没有任何区别。

这是一种在一列中的项目的一个例子：

<div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <span class="glyphicon glyphicon-star yelloStar"></span> 
      <label class="float-left">name</label>    
     </div> 
     <div class="panel-body">  
      <span>text</span> <a href="#" class="btn btn-link">read more</a> 
      <a href="#" class="btn btn-primary btn-xs pull-right">ADD</a> 
     </div>  
    </div> 
</div>

来源

2016-04-26 Magick

的面板（类.panel）将必须被显示为inline-block，然后其width需要设置到100%。最好将.panel的这一修改与列数设置隔离为div，以便不影响不在列中的面板。例如：

.my-col-count-style .panel { 
    display: inline-block; 
    width: 100%; 
}

这里是一个Codepen.io example。

来源

2016-04-26 17:30:12

如果您正在寻找这样的事情

试试下面的代码

<head> 
    <style> 
    .divElem{ 
     display:inline-block; 
    } 
    </style> 
</head> 
<body> 
    <div class="divElem"> 
    <div class="panel panel-default tick"> 
     <div class="panel-heading"> 
     <span class="glyphicon glyphicon-star yelloStar"></span> 
     <label class="float-left">name</label>    
     </div> 
     <div class="panel-body">  
     <span>text</span> <a href="#" class="btn btn-link">read more</a> 
     <a href="#" class="btn btn-primary btn-xs pull-right">ADD</a> 
     </div>  
    </div> 
    </div> 
    <div class="divElem"> 
    <h1> name</h1> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <span class="glyphicon glyphicon-star yelloStar"></span> 
     <label class="float-left">name</label>    
     </div> 
     <div class="panel-body">  
     <span>text</span> <a href="#" class="btn btn-link">read more</a> 
     <a href="#" class="btn btn-primary btn-xs pull-right">ADD</a> 
     </div>  
    </div> 
    </div> 
</body>

，你也可以尝试引导的网格系统来实现这一目标。

来源

2016-04-26 17:42:26 Sumac

css列计数：列内容正在打破内部div

回答

相关问题