新行列表

Question

当li与(以前的 li )之间的空间不足时，在新的行上获得它会遇到一些困难。

一切都可以在更大的屏幕、平板电脑和移动设备上工作。但不是在中等尺寸的屏幕上。这是因为它应该以不同的方式作出反应。它的运行与引导，使所有的反应和易于理解。

问题是Loa / Breadth (mld) / Draught是一个很长的单词，所以它没有足够的空间，并且在下一行还在继续。这意味着文本Length p.p / Depth (mld)在右边继续。应该在下一行继续这样做。

很难解释。如果您能访问链接并最小化窗口以查看，我将不胜感激。

我还提供了一个截图来看。

​

​

<?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;属性。在这种情况下，如果一边有两条线，另一边只有一条线，那么下一列就会试着在这条线上放进去，这样它就向上了。

在您的示例中，您可以对需要修复的那些.col-*类这样做：

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

这应该能行。

Answer 2

您需要在每一行之后清除css，所以我建议将clear: both;添加到.col-sm-4 css中。它会解决这个问题。

Answer 3

将下面的css添加到.semibold类中，以删除单词换行式。如下所示：

.semibold{
  white-space: nowrap;
}