Question

我有4列，但是当我隐藏一个或多个列时，它会完全改变列宽：

<div class="row">
    <div class="col-md-3 hide-this">col-1</div>
    <div class="col-md-3 hide-this">col-2</div>
    <div class="col-md-3">col-2</div>
</div>

如果我用hide-this类隐藏所有cols，它会改变唯一仍然可见的cols的宽度

$('.hide-this').hide();

如何保持仍然可见的色谱柱宽度？

Answer 1

它会更改列宽

它不会改变列宽。实际发生的情况是，当删除列时，其他列移动以填充新创建的间隙。但是列的宽度保持不变。

所以，现在的问题是：你能做些什么来防止他们移动以填补新创造的差距？

在这种情况下，您可以使用自适应Bootstrap 4 offset类。并且还使用d-none类（display：none）来隐藏元素。

因此，例如，如果要隐藏第一列，则将d-none类添加到该列，然后将offset-md-3类添加到以下列以防止它进入像这样的差距：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-md-3 bg-primary d-none">col-1</div>
        <div class="col-md-3 bg-secondary offset-md-3">col-2</div>
        <div class="col-md-3 bg-warning">col-3</div>
        <div class="col-md-3 bg-success">col-4</div>
    </div>
</div>

在这种情况下，你的jQuery就像是。

$('.bg-primary').addClass('d-none');
$('div.bg-primary').next().addClass('offset-md-3');

md中的offset-md-3表示偏移仅发生在md或更大的屏幕上，并且不会发生在小于md的屏幕上（介质）。这就是你想要的，因为在这种情况下，它们都会叠加在较小的屏幕上。

如果您想要隐藏第二列，请向其添加d-none类，但这次您需要将offset-md-6添加到以下列，因为现在您已删除了2列每个宽3个单位。

因此，您的HTML现在将更改为：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-md-3 bg-primary d-none">col-1</div>
        <div class="col-md-3 bg-secondary d-none">col-2</div>
        <div class="col-md-3 bg-warning offset-md-6">col-3</div>
        <div class="col-md-3 bg-success">col-4</div>
    </div>
</div>

此外，如果您只想在md或更大的屏幕上隐藏列，但在较小的屏幕上显示，则您使用d-md-none代替d-none。< / p>

使用jQuery隐藏Bootstrap 4列

1 个答案: