การกำหนดขนาดลงใน css จะทำให้หน้าจอไม่ยืดหยุ่น
ลองดู
โค้ด: เลือกทั้งหมด
<div class="form-group">
<label>Gender</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="male" value="male">
<label class="form-check-label" for="male">Male</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="female" value="female">
<label class="form-check-label" for="female">Female</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="non-binary" value="non-binary">
<label class="form-check-label" for="non-binary">Non-binary</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="prefer-not-to-say" value="prefer-not-to-say">
<label class="form-check-label" for="prefer-not-to-say">Prefer not to say</label>
</div>
</div>
มาจาก บอก chat.openai.com ว่า
write css for Bootstrap sex selection
คำตอบแรกจะได้ แบบ เป็น Listbox มาต้องบอกต่อว่า
convert it to radio button
จะได้โค้ดตามตัวอย่างข้างบน ลองไปรับใช้ดู ลบ คัวเลือกให้เหลือเท่าที่ต้องการ