twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Home Page:https://getbootstrap.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

_grid.scss .row > * impacts on many blocks and regions

webprogrammierer opened this issue · comments

commented

Prerequisites

Describe the issue

This code in _grid.scss

@if $enable-grid-classes {
  .row {
    @include make-row();

    > * {
      @include make-col-ready();
    }
  }
}

impacts on many block, regions and other elements having the. row class.

The code results in the following CSS:

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x)* 0.5);
    padding-left: calc(var(--bs-gutter-x)* 0.5);
    margin-top: var(--bs-gutter-y);
}

Is is a really bad idea to use .row > * without any .grid class.
On thausends of sites this leads to necessary but not easy CSS adjustments on a lot of blocks, elements, regions which use the .row class.

Can you plesae remove / adapt these lines and to ensure they does not result in .row > * ?

Thank you.

Reduced test cases

<section class="row region region-menu">
     <a href="/" title="Startseite" rel="home" class="navbar-brand">
           <img src="/themes/custom/xxxx/logo.svg" alt="" class="img-fluid d-inline-block align-top">
            <span class="ml-2 d-none d-md-inline"></span>
    </a>
    <nav role="navigation" aria-labelledby="block-mainnavigation-menu" id="block-mainnavigation" class="contextual-region block block-menu navigation col-12 menu--main">
     ...
   </nav>
   <div class="search-block-form contextual-region block block-search block-search-form-block" data-drupal-selector="search-block-form" id="block-searchform" role="search">
     ....
   </div>
</section>

What operating system(s) are you seeing the problem on?

Windows, Linux

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

v5.3.3

Hello @webprogrammierer. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or StackBlitz and report back with your link, Bootstrap version, and specific browser and Operating System details.

commented

This is browser independent as you can see.

Anybody can see, that using

.row > * {
}

is a great problem!

Hello @webprogrammierer
If possible on your side, you've mentioned a reduced test case in the description. Could you please transform it to a live demo with CodePen, StackBlitz, or any other tools? It saves us a lot of time.

commented

For this problem

.row > * {
}

there is no demo necessary. Everybody can see the problem immeditally. This will impact on thausands of sites with different effects.

No changes planned here.

commented

Hello @mdo .
Why no changes if it impacts thausends of sites with massive layout effects?

commented

I am sure, this will be changed in one of the next releases.
Why not do it just now?