Bootstrap 容器宽度而不是屏幕宽度

Question

I'm using Bootstrap 4, but I don't want to use screen width. I want layout over whatever width the container has.

I couldn't find the details after searching.

The following codes are placed according to the screen width. However, I want it to be adjusted according to the current width of the container I specified.

<div class="row">

<div class="col-lg-4">

SIDEBAR

</div>

<div class="col-lg-8">

<div class="row"> /*The following boxes should be shaped according to the width of this container.*/
<div class="col-xl-4 col-lg-3">A</div>
<div class="col-xl-4 col-lg-3">B</div>
<div class="col-xl-4 col-lg-3">C</div>
<div class="col-xl-4 col-lg-3">D</div>
</div>

</div>

</div>

Answer 1

I'm not very sure what you need exactly, but it seems that you want a boxed layout instead a fluid one. If you use a .container class will apply the boxed effect you want.

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-xl-4">Column</div>
        <div class="col-lg-3 col-xl-4">Column</div>
    </div>
</div>

Here the documentation: https://getbootstrap.com/docs/4.0/layout/overview/

If this is not what you need, please try to be more clear about your goal.