html - 新行列表

Question

当 上一个 li 的空间不足时，将 li 换行时遇到一些麻烦。

一切都适用于更大的屏幕、平板电脑和手机。但不是在中等尺寸的屏幕上。这是因为它应该以不同的方式响应。它使用 Bootstrap 运行，使一切响应迅速且易于理解。

问题是 Loa/Breadth (mld)/Draught 是一个长词，所以空间不够，在下一行继续。这意味着文本 Length p.p/Depth (mld) 在右侧继续。这应该在下一行继续。

这很难解释。如果可以的话，我将不胜感激visit the link并将窗口最小化以查看。

我也提供截图给大家看看。

<?php $renderfield = types_render_field('loa-breadth-mld-draught', array('raw'=>'true'))?>
<?php if(!empty($renderfield)){?>
   <div class="col-xs-12 col-sm-4 col-md-4">
   <li class="semibold">Loa / Breadth (mld) / Draught</li>
   </div>
   <div class="col-xs-12 col-sm-8 col-md-8">
   <ul><span class="light"><?php echo(types_render_field( "loa-breadth-mld-draught", array( 'raw' => true, 'separator'=>'</li><li>') )); ?></span></ul>
   </div>
<?php } ?> 

<?php $renderfield = types_render_field('lengt-p-p-depth-mld', array('raw'=>'true'))?>
<?php if(!empty($renderfield)){?>
   <div class="col-xs-12 col-sm-4 col-md-4">
   <li class="semibold clearboth">Length p.p / Depth (mld)</li>
   </div>
   <div class="col-xs-12 col-sm-8 col-md-8">
   <ul><span class="light"><?php echo(types_render_field( "lengt-p-p-depth-mld", array( 'raw' => true, 'separator'=>'</li><li>') )); ?></span></ul>
   </div>
 <?php } ?> 

Answer 1

首先，你忘了使用.clearfix在 .col-* 的父级上在你的情况下，<ul class="clearfix">是需要的。第二件事是，所有.col-*类包含 float: left;属性(property)。在这种情况下，如果一侧有 2 条线而另一侧只有 1 条线，则下一列会尝试适应该线，使其向上。

在您的情况下，您可以对那些 .col-* 执行此操作您需要修复的类:

[class^="icon-"] {
  display: inline-block;
  vertical-align: top;
  margin-right: -3px;
}

这应该有效。