标签达到2行时如何修复布局

Question

我有一个标签和输入框（表格），我使用bootstrap的CSS但我的问题是当我的标签变成2行/段我的布局不固定或相等。即使文本是2行/段，如何使布局看起来像主要信息。检查下面的图片

我使用这段代码

<div class="col-md-12"> 
<div class="col-lg-2">
   <label class="control-label"><?php echo $required_notice.$val_option['option']?><?php if(!empty($options_lang[$key][$key_option]->hint)):?><i class="icon-question-sign hint" data-hint="<?php echo $options_lang[$key][$key_option]->hint;?>"></i><?php endif;?></label>
   <div class="controls">
      <?php 

       $cur_value = isset($estate['option'.$val_option['id'].'_'.$key])?$estate['option'.$val_option['id'].'_'.$key]:'';

       echo form_input('option'.$val_option['id'].'_'.$key, set_value('option'.$val_option['id'].'_'.$key, $cur_value), 'class="form-control '.$val_option['type'].'" id="inputOption_'.$key.'_'.$val_option['id'].'" strlen="'.strlen($cur_value).'" placeholder="'.$val_option['option'].'" '.$required_text.' '.$max_length_text)?>

  </div>
 </div>
</div>

注意：我正在使用foreach来填充我的字段。

谢谢。

Answer 1

如果你喜欢这个单词的省略号就像“你的单词就是......”那么你必须在你的标签上应用以下代码行。

.your-label {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   display: block;
 }

如果你有任何问题请告诉我:)

Answer 2

您可以使用CSS的flex样式。 align-items：flex-end将从底部而不是顶部对齐所有输入框。所以看起来会更好。

<div class="container">
  <div class="row">
    <form> 
        <div class="col-lg-2">
         <label class="control-label"><?php echo $required_notice.$val_option['option']?><?php if(!empty($options_lang[$key][$key_option]->hint)):?><i class="icon-question-sign hint" data-hint="<?php echo $options_lang[$key][$key_option]->hint;?>"></i><?php endif;?></label>
         <div class="controls">
            <?php 

             $cur_value = isset($estate['option'.$val_option['id'].'_'.$key])?$estate['option'.$val_option['id'].'_'.$key]:'';

             echo form_input('option'.$val_option['id'].'_'.$key, set_value('option'.$val_option['id'].'_'.$key, $cur_value), 'class="form-control '.$val_option['type'].'" id="inputOption_'.$key.'_'.$val_option['id'].'" strlen="'.strlen($cur_value).'" placeholder="'.$val_option['option'].'" '.$required_text.' '.$max_length_text)?>

        </div>
      </div>
    </form>
  </div>
</div>

form {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}