Question

Here s my current code.

<div class="col-xl-2 col-lg-12">
    <button class="btn btn-secondary w-100" value=1>But.</button>
</div>
<div class="col-xl-4 col-lg-12">
    <button class="btn btn-secondary w-100" value="1">Button Down</button>
</div>
<div class="col-xl-4 col-lg-12">
    <button class="btn btn-secondary w-100" value="1">Button Up</button>
</div>
<div class="col-xl-2 col-lg-12">
    <button class="btn btn-secondary w-100">But.</button>
</div>

And this is how it normally looks.

Each col has its own rules so they fill the column depending on the window s size. However, there is a small window of resolution where the buttons do this:

Before adopting the right layout:

The "But." buttons inner text overflows, while the "Button down" button text splits in two lines. How can I keep the text from the "But." button from overflowing and keep the text from the "Button down" button to be separated into two lines? I thought I could re-compile Bootstrap to redefine the xl grid breakpoint, but that fills like too much (and a bad practice, to modify Bootstrap like that for such a small issue). Isn t there a way to get the behaviour I want?

Answer 1

To prevent a Bootstrap v4 button from wrapping text, apply .text-nowrap class to it.

I advise against placing each button into a column. A better UI is to use .button-group and, using a custom class selector (.responsive-button-group in the example below - but you can name it anything you want) and a bit of JavaScript, to toggle the class .btn-grooup-vertical on the group, based on whether a particular media query matches or not.

In the example below I used the md/lg breakpoint:

const mql = window.matchMedia( (min-width: 992px) );
function updateResponsiveButtonGroups() {
  [...document.querySelectorAll( .responsive-button-group )].forEach(
    (el) => el.classList[mql.matches ?  remove  :  add ]( btn-group-vertical )
  );
}
updateResponsiveButtonGroups();
mql.addEventListener( change , updateResponsiveButtonGroups);

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">


<div class="container">
  <div class="row">
    <div class="col">
      <div class="btn-group w-100 responsive-button-group" role="group" aria-label="Basic example">
        <button class="btn btn-secondary text-nowrap" value=1>But.</button>
        <button class="btn btn-warning text-nowrap" value="1">Button Down</button>
        <button class="btn btn-warning text-nowrap" value="1">Button Up</button>
        <button class="btn btn-secondary text-nowrap">But.</button>
      </div>
    </div>
  </div>
</div>

Here s the list of Bootstrap s breakpoints, should you want to use another one.

The script will apply the change to as many groups as you have, provided they all have the custom class.

友情链接