Pastikan teks dalam butang tidak melimpah (menggunakan Bootstrap v4)

Question

Ini kod semasa saya.

<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>

Beginilah kebiasaannya.

Setiap col mempunyai peraturan tersendiri, jadi mereka mengisi lajur berdasarkan saiz tetingkap. Walau bagaimanapun, terdapat tetingkap resolusi kecil di mana butang boleh melakukan ini:

Sebelum menggunakan susun atur yang betul:

"Tetapi". Teks dalaman butang melimpah, manakala teks butang "Butang turun" dipecahkan kepada dua baris. Bagaimanakah saya boleh menyimpan teks dalam "tetapi"? Butang limpahan dan belah teks dalam butang "butang ditekan" kepada dua baris? Saya fikir saya boleh menyusun semula Bootstrap untuk mentakrifkan semula titik putus grid xl, tetapi itu terlalu banyak padding (dan amalan buruk untuk mengubah suai Bootstrap untuk masalah kecil itu). Adakah terdapat cara untuk mendapatkan tingkah laku yang saya mahukan?

Answer 1

Masalah utama ialah saya cuba menggunakan w-100 使按钮的宽度为 100%。问题是，当屏幕为手机大小时，行为是预期的（按钮水平填充列）。然而，在大屏幕上，有一个小的分辨率窗口，在此期间 w-100 untuk memaksa butang menjadi lebih kecil daripada ruang yang diperlukan untuk teks dalam (kerana lebar butang adalah 100% daripada lajur untuk mengandunginya).

Untuk membetulkannya, saya telah mengeluarkan dua "tetapi" w-100. butang dan tambah peraturan saya sendiri pada css saya.

@media (max-width: 1199.98px) {
    .btn-full-width {
      width: 100%;
    }
  }

Jadi secara lalai, butang mengambil sebanyak mungkin ruang seperti yang diperlukan oleh teks dalam dan pada skrin yang lebih kecil (sebarang resolusi di bawah titik putus XL) ia mengambil keseluruhan lajur.

Satu lagi isu tentang teks yang dipecahkan kepada dua baris telah dibetulkan dengan kelas text-nowrap dalam dua butang yang lain.

<div class="row mb-2">
    <div class="col-xl-2 col-lg-12">
        <button class="btn btn-secondary btn-full-width">But.</button>
    </div>
    <div class="col-xl-4 col-lg-12">
        <button class="btn btn-secondary text-nowrap w-100">Button up</button>
    </div>
    <div class="col-xl-4 col-lg-12">
        <button class="btn btn-secondary text-nowrap w-100" type="button">Button down</button>
    </div>
    <div class="col-xl-2 col-lg-12">
        <button class="btn btn-secondary btn-full-width invert-button" type="button">But.</button>
    </div>
</div>