列出新行

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

您需要在每次播放后清除css，因此我建议您将clear: both;添加到.col-sm-4 css。它将解决问题。

Answer 2

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

在您的情况下，您可以为需要修复的[class^="icon-"] { display: inline-block; vertical-align: top; margin-right: -3px; } 类执行此操作：

{{1}}

这应该有效。

Answer 3

将以下css添加到.semibold类以删除自动换行。下面：

.semibold{
  white-space: nowrap;
}