Bootstrap: จัดให้ชิดซ้ายหรือชิดขวา

เวลาที่เราเขียนเว็บไซต์จะต้องมีข้อความบางอย่างที่เราต้องการให้ข้อความกอไก่อยู่ชิดซ้าย ข้อความขอไข่อยู่ชิดขวา และทั้งสองอยู่บรรทัดเดียวกัน แต่… เว็บไซต์ไม่ได้ง่ายขนาดที่จะคลิดปุ่ม align แล้วสามารถเลื่อนข้อความทั้งสองนี้ได้

ข้อความ ก.ไก่                                                                                          ข้อความ ข.ไข่

ในตอนเริ่มแรกที่ใช้งาน bootstrap เราจึงทำการแบ่ง col และเลือกให้ col ฝั่งซ้ายชิดซ้าย col ฝั่งขวาชิดขวา

< div class="row">
     < div class="col-md-6 float-left">
          ข้อความ ก.ไก่
     </ div> <!--/.col-->
     < div class=" col-md-6 float-right">
          ข้อความ ข.ไข่
     </ div> <!--/.col-->
</ div> <!--/.row-->

ทำแบบถึกๆเช่นนี้มาเรื่อยๆ จนกระทั่งวันหนึ่ง… ก็ไปพบเจอโค้ด “สั้นๆ” นั่นก็คือ .pull-left และ .pull-right วิธีใช้ก็คือ

< div class="row">
     < div class="col-md-12">
          < div class="pull-left">ข้อความ ก.ไก่</ div>
          < div class="pull-right">ข้อความ ข.ไข่</ div>
     </ div> <!--/.col-->
</ div> <!--/.row-->

 

นอกจากนี้ถ้าหากใช้ .pull-right ซ้ำกัน จะหมายถึง ชิดขวาของอันแรก เช่น

< div class="row">
     < div class="col-md-12">
          < div class="pull-left">ข้อความ ฮ.ฮูก</ div>
          < div class="pull-right">ข้อความ ก.ไก่</ div>
          < div class="pull-right">ข้อความ ข.ไข่</ div>
     </div> <!--/.col-->
</ div> <!--/.row-->

จะได้ว่า

ข้อความ ฮ.ฮูก                                                            ข้อความ ข.ไข่ ข้อความ ก.ไก่

หมายเหตุ: < div > การพิมพ์ในบล็อคถ้าไม่เว้นวรรค โค้ดตัวอย่างจะไม่แสดง