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

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

Moderator: mindphp

User avatar
Tookta
PHP Super Member
PHP Super Member
Posts: 423
Joined: 12/12/2022 9:12 am

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

Post by Tookta »

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

Code: Select all

<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 109 times
เบื้องต้นลองเพิ่ม padding ลง css เพิ่ม จะออกมาเป็นรูปแบบนี้ค่ะ
figma_24_1.png
figma_24_1.png (18.05 KiB) Viewed 109 times
HTML

Code: Select all

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

Code: Select all

.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 แบบข้างต้นไหมคะ เพราะว่าต้องเพิ่มหลายครั้งเกินไป
User avatar
eange08
PHP VIP Members
PHP VIP Members
Posts: 9408
Joined: 22/12/2020 10:09 am

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

Post by eange08 »

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

Code: Select all

width:10em;
width:10vw;
- ส่วนตัว label ลองเช็คจาก css ของ bootstrap ใช้ text-align อะไร ปรับเปลี่ยนใน css ที่เราสร้างได้
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Who is online

Users browsing this forum: No registered users and 4 guests