如果第二列没有内容，如何调整第一列的大小答案

【问题标题】：How to resize the first column if the second column doesn't have content如果第二列没有内容，如何调整第一列的大小
【发布时间】：2015-10-15 22:47:31
【问题描述】：

我正在尝试在 Bootstrap 中创建一个站点。我有一页。在我的页面中，我创建了两列：

<div class="container-fluid">
<div class="row">
    <div class="col-md-9">
        Some information
    </div>
    <div class="col-md-3">
        Some information
    </div>
</div>
</div>

如果第二列没有内容，我如何将第一列的大小从 col-md9 调整为 col-md-12（全宽）？

【问题讨论】：

听起来你需要使用 flexbox、javascript 或服务器端技术来做到这一点

标签： twitter-bootstrap

【解决方案1】：

如果你愿意使用 javascript / jQuery，你可以这样做：

$('.row .col-md-3').each(function() {
    if (this.textContent.trim() == '') {
        $(this)
            .parent()
            .find('.col-md-9')
            .removeClass('col-md-9')        
            .addClass('col-md-12');
        $(this).remove();
    }    
})

如果任何.col-md-3 为空，则兄弟div .col-md-9 将“升级”为.col-md-12，.col-md-3 本身将被删除。

演示 -> http://jsfiddle.net/cy0kx44o/

【讨论】：

【解决方案2】：

使用表格。如果第二列上有任何内容，请使用具有最小宽度的 div 包装内容。

    <table border=1 width=100% cellpadding=0 cellspacing=0>
      <tr>
         <td class='left'>My First Content</td>
         <td><div class='right'>My Second Content</div></td>
     </tr>
    </table>

    <style>
      @media (min-width: 768px){
       .right{
          min-width: 186px
       }
       .left{
          min-width: 558px;
       }
      }
     </style>

表格也可以用.col-md-12 包裹。

【讨论】：