Mengapakah gaya kelas Bootstrap saya tidak berkuat kuasa?

Question

Jadi saya baru mengenali HTML, CSS dan bootstrap dan saya tidak dapat mengemas kini nilai helaian gaya saya dalam pratonton, berikut ialah label butang saya dan nilainya:

<button class="btn btn-primary btn-xl">Find out More</button>

Tetapi apabila saya cuba menukar gaya nilai btn-xl dalam CSS saya,

.btn-xl {
    padding: 1rem 2rem;
}

Sebarang perubahan yang saya buat tidak akan dipaparkan dalam pratonton. Tolong seseorang beritahu saya di mana silap saya?

Jadi saya cuba menyemak pautan saya, mungkin terdapat ralat dalam pengepala pautan menyambungkan HTML dan CSS saya, tetapi tidak ada yang salah di sana. Saya menyemak sebarang kesilapan menaip yang mungkin bercanggah, tetapi ini pastinya bukan kesilapan menaip, jadi saya tersesat sepenuhnya.

Answer 1

Nampaknya masalah anda berpunca daripada Bootstrap yang mengatasi nilai. Ia boleh menjadi isu dengan susunan anda menambahkan helaian gaya, atau ia boleh menjadi isu kekhususan. Jika anda menukar nama kelas, ia menjadi:

.btn.btn-xl {
    padding: 1rem 2rem;
}

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

<button class="btn btn-primary btn-xl">了解更多</button>

Jika anda ingin menukar gaya semua butang, anda boleh mengemas kini pembolehubah yang digunakan oleh Bootstrap untuk melaraskan padding.