如何在Bootstrap中创建3列，其中最后一列是灵活的并占用剩余空间？

Question

删除column2时，如何为column3添加新的额外空格？

除了某种col-md-10之外，你还设置了除col-md-flex以外的其他内容吗？或者在删除column2？

时动态/以编程方式更改它

我有这个：

<div class="container-fluid">
    <div class="row">
        <div id="column1" class="col-md-1" style="background-color: gray">
            <div>menu1</div>
            <div>menu1</div>
            <div>menu1</div>
        </div>
        <div id="column2" class="col-md-1" style="background-color: green">
            <div>menu2</div>
            <div>menu2</div>
            <div>menu2</div>
        </div>
        <div id="column3" class="col-md-10">
            @RenderBody()
        </div>
    </div>
</div>

Answer 1

删除column2时，可以将column3的类设置为col-md-11

$('#column2').remove();
$('#column3').attr('class','col-md-11');

引导网格系统（流体或固定宽度）使用12列网格系统，允许在显示器上实现一致的布局，因此您必须设置最后一个div的宽度以占用剩余的列（11 case）这样它将占用宽度的正确比例（在1170px容器上为11/12或91.7％或1067px）。