สอบถามแก้ไขช่อง span ของ bootstrap มีขนาดตามตัวหนังสือ

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
Tookta
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 641
ลงทะเบียนเมื่อ: 12/12/2022 9:12 am

สอบถามแก้ไขช่อง span ของ bootstrap มีขนาดตามตัวหนังสือ

โพสต์ที่ยังไม่ได้อ่าน โดย Tookta »

โค้ดในส่วนของ span และช่อง input (bootstrap 3)
HTML

โค้ด: เลือกทั้งหมด

<div class="input-group">
                  <span class="input-group-addon alert-info head-user">ชื่อผู้ใช้งาน</span>
                  <input type="text" name="qrcode_user_name" class="form-control username"
                    autocomplete="off" placeholder="" value="">
                </div>
การแสดงผลแบบไม่เพิ่ม padding
figma_24_2.png
figma_24_2.png (17.8 KiB) Viewed 825 times
เบื้องต้นลองเพิ่ม padding ลง css เพิ่ม จะออกมาเป็นรูปแบบนี้ค่ะ
figma_24_1.png
figma_24_1.png (18.05 KiB) Viewed 825 times
HTML

โค้ด: เลือกทั้งหมด

<span class="input-group-addon alert-info head-user">ชื่อผู้ใช้งาน</span>
css

โค้ด: เลือกทั้งหมด

.head-user{
    box-sizing: border-box;
    width: 6% !important;
    height: 87% !important;
    background: #D9EDF7;
    border: 1px solid #BCE8F1;
    border-radius: 5px 0px 0px 5px;
    padding-left: 15px !important;
}
**อยากทราบว่ามีวิธีไหนแก้ไขได้บ้างนอกจาก padding แบบข้างต้นไหมคะ เพราะว่าต้องเพิ่มหลายครั้งเกินไป
ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16180
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

Re: สอบถามแก้ไขช่อง span ของ bootstrap มีขนาดตามตัวหนังสือ

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

- กำหนด class css ชื่อเดียวกัน
- ใน css ที่ span กำหนด width ด้วยหน่วย em, vw ตามความเหมาะสม แทนการใช้ %

โค้ด: เลือกทั้งหมด

width:10em;
width:10vw;
- ส่วนตัว label ลองเช็คจาก css ของ bootstrap ใช้ text-align อะไร ปรับเปลี่ยนใน css ที่เราสร้างได้
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 69