Bootstrap 4 行未扩展到 100% 宽度答案

【问题标题】：Bootstrap 4 row not expanding to 100% widthBootstrap 4 行未扩展到 100% 宽度
【发布时间】：2020-07-10 17:02:02
【问题描述】：

我正在尝试创建包含 3 列的行。一个用于分页计数，一个用于过滤表格，另一个用于按住按钮。

在小型、中型和大型视口中，一切看起来都很棒，但是当我最大化我的窗口时，我的桌子正上方有一个巨大的空隙。请参阅下图（底部）以供参考。

我不确定我哪里出错了。我已经尝试了所有我能想到的 flex-fill、w-100 等变体，以使其在 xl 视口上扩展到 100% 宽度，但我无法弄清楚。

以下是表格上方该部分的相关代码：

<div class="col">
    <div class="container no-padding">
        <div class="row mt-1">
            <div class="col d-none d-md-block no-padding">
                <p>Showing {{ $assets->firstItem() }}-{{ $assets->lastItem() }} of {{ $assets->total() }} total</p>
            </div>
            <div class="col-auto flex-fill flex-md-grow-0 no-padding mb-3">
                <div class="container">
                    <div class="row">
                        <div class="col m-0 p-0 mr-2">
                            <form class="form-inline">
                                <div class="input-group">
                                    <input style="font-size:80%;" class="form-control" type="text" name="filter" value="" placeholder="Filter results">
                                </div>
                            </form>
                        </div>
                        <div class="no-padding">
                            <a class="btn btn-dark btn-sm mr-1" href="{{ action('AddAssetController@index') }}" role="button"><i style="font-size:80%;" class="fas fa-plus"></i> New Asset</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

编辑：

这是我的模板中的代码。上面的代码是@section('content') 的一部分，它被输出到下面的@yield('content') 并被下面的@yield('content') 解析。

<div class="row">
    <div class="col-12 no-padding">
        @include('layout.includes.header')
    </div>
</div>
<div class="row h-100">
    <div class="col-12">
        <!-- Begin nav/content row --> 
        <div class="row h-100">
            <div id="sidebar-wrapper" class="visible">
                @include('layout.includes.nav')
            </div>
            <!-- Begin main column -->
            <div class="col content" style="overflow-x:auto;">
                <div class="row no-padding">
                    <div class="col d-none d-sm-block">
                        <h4>@yield('content-heading')</h4>
                    </div>
                    <div class="col flex-grow-1">
                        @include('layout.includes.searchform')
                    </div>
                </div>
                <div class="row no-padding inner-box shadow p-3 mb-5 bg-white rounded">
                    @yield('content') <!--this is where the original code appears-->
                </div>
            </div>
            <!-- END main column-->
        </div>
        <!-- END nav/content row-->
    </div>
</div>

【问题讨论】：

我认为这个间隙实际上是容器的边缘，这有点乱
您能否包含更多代码。我想看看你的第一个col里面是什么。我还看到一行有 2 列，其中一列包含一个带有另一行的容器。
@EdwinCruz 见我上面的编辑。任何帮助都会很棒。
@LeandroRR 你能详细说明一下吗？
为什么要在某些列中放置容器？

标签： css bootstrap-4

【解决方案1】：

不确定这是否是您想要实现的目标，但我已尽力使其看起来像您想要的那样，如果真的是这样，请告诉我：https://jsfiddle.net/leandrorr/t4rbfdv3/6/

html:

<div class="result-count p-4 border">
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-lg-6">
        Showing 1-20 of 32 total
      </div>
      <div class="col-lg-6">
        <form action="" class="form-inline float-right">
          <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
          <button type="submit" class="btn btn-primary mb-2">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

【讨论】：