หัวเรื่อง Bootstrap Center

94

มันเป็นประสบการณ์ Bootstrap Twitter ครั้งแรกของฉัน ฉันได้เพิ่มส่วนหัวบางส่วน (h1, h2 และอื่น ๆ ) และจัดชิดซ้าย วิธีที่ถูกต้องในการจัดหัวเรื่องคืออะไร?

twitter-bootstrap

— ไซบีเรียน
แหล่งที่มา

คุณมีหัวเรื่องอย่างไร? ภายในภาชนะเช่นpแท็กหรือหลวม?

— Andres Ilich

@AndresIlich ด้านในของ row-fluide (ซึ่งอยู่ใน container-fluide)

— SiberianGuy

คุณต้องการให้หัวเรื่องทั้งหมดอยู่ตรงกลางหรือไม่ หรือเลือกเพียงไม่กี่อย่าง?

— Andres Ilich

@AndresIlich ฉันต้องการให้หัวเรื่องทั้งหมดอยู่กึ่งกลางโดยค่าเริ่มต้น

— SiberianGuy

142

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

bootstrap ได้เพิ่มคลาส css สามคลาสสำหรับการจัดแนวข้อความ

— จินผู่หู
แหล่งที่มา

69

เพียงใช้ class = 'text-center' ในองค์ประกอบสำหรับส่วนหัวตรงกลาง

<h2 class="text-center">sample center heading</h2>

ใช้ class = 'text-left' ในองค์ประกอบสำหรับส่วนหัวด้านซ้ายและใช้ class = 'text-right' ในองค์ประกอบสำหรับส่วนหัวด้านขวา

— Sadegh-khan
แหล่งที่มา

30

เพียงใช้ "justify-content-center" ในแอตทริบิวต์คลาสของแถว

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>

— Jufrench
แหล่งที่มา

2

ทำไมความซับซ้อนทั้งหมดนี้? ไม่ใช่<h1 class="text-center">แค่ง่ายกว่านั้นตามคำตอบของ Sadegh-khanหรือไม่?

— Marco Sulla

การใช้สิ่งนี้ช่วยให้ส่วนหัวกลายเป็นศูนย์กลางใน div เมื่อใช้ bootstrap ซึ่งการใช้ text-center ไม่ได้ทำ มันทำให้ส่วนหัวปรากฏขึ้นกลางหน้าจอซึ่งเป็นสิ่งที่ฉันเล็งไว้

— แมน

11

ตามความคิดเห็นของคุณเพื่อจัดให้หัวเรื่องทั้งหมดอยู่ตรงกลางสิ่งที่คุณต้องทำคือเพิ่มลงtext-align:centerในหัวเรื่องทั้งหมดในเวลาเดียวกันดังนี้:

CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }

— Andres Ilich
แหล่งที่มา

1

ในขณะที่ความจริงแนวคิดเบื้องหลังการใช้ twitter bootstrap คือการใช้คลาสที่มีอยู่ให้มากที่สุด ดูคำตอบโดย Jinpu Hu

— Skurpi

@Skurpi Frameworks ทำหน้าที่เป็นคำแนะนำเกี่ยวกับสิ่งที่คุณสามารถใช้ในโครงการ พวกเขาไม่ได้ให้ แม้ว่าจะง่ายกว่าในการใช้คลาสและรูปแบบที่กำหนดไว้แล้วใน bootstrap หากข้อกำหนดของโครงการของคุณ "ต้องการ" ให้คุณทำการเปลี่ยนแปลงอย่างมากในกรอบงานตามคำถามของ OP มากกว่าวิธีที่ง่ายที่สุดในการดำเนินการคือเพียงแค่แก้ไขการเปลี่ยนแปลงเหล่านั้นที่ ระดับราก ตรงข้ามกับการเพิ่มคลาสที่คุณไม่ต้องการจริงๆ

— Andres Ilich

@Skurpi นอกจากนี้คลาสการจัดตำแหน่งเหล่านั้นไม่มีอยู่ในขณะที่เขียน คำตอบนี้มีอายุหนึ่งปี

— Andres Ilich

Ilich คุณพูดถูกไม่ได้ดูวันที่ของคำถามนี้เมื่อฉันมาถึงที่นี่

— Skurpi

5

เงินทุนมาพร้อมกับหลาย ๆ class="text-left"ก่อนสร้างการเรียนและหนึ่งในนั้นคือ กรุณาโทรหาชั้นเรียนนี้ทุกครั้งที่ต้องการ :-)

— ตินแซ
แหล่งที่มา