Question

我试图在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（全宽）？

Answer 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本身即被删除。

演示 - ＆gt;的 http://jsfiddle.net/cy0kx44o/

Answer 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包裹。

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

2 个答案: