ช่วยดูหน่อยครับ Boostrap จะวางขอมูลแบ่งครึ่ง อย่างละ6 colum แล้วให้อยู่ตรงกลาง

[xcored]

ช่วยดูหน่อยครับ Boostrap จะวางขอมูลแบ่งครึ่ง อย่างล ะ6 colum แล้วให้อยู่ตรงกลาง

แนกำผมจะให้รูปกินไป ครึ่งหน้าจอ อีกครึ่งหน้าจอจะเป็นคำอธิบายครับ แต่คำอธิบายมันชิดขอบบนตรงกลางมันไม่ตกลงมากลางก่องอะครับ

<div class="container-fluid">
<div class="row">
<div class=" col-md-6 " style="padding-left:0">
<img class="img-responsive" src="img/green.jpg"  />
</div>
<div class="col-md-6 text-center">
GREEN
</div>
</div>
</div>


code ที่เขียนมันได้แบบนี้อะครับ



แบบนี้อิะครับตอนpc


แบบนี้อิะครับตอนมือถือ

[nut_anek]

สำหรับ Bootstrap 3
มันก็มีวิธีแก้หลายแบบครับ
หนึ่งในนั้น http://www.bootply.com/aaxnmumOEs

แต่มันก็ยังไม่ค่อย make sense เท่าไหร่
หรืออาจจะต้องใช้ javascript มาช่วย

แต่ถ้าใช้ Bootstrap 4 มันจะมี Flexbox ให้เรียกใช้เลยครับ
https://v4-alpha.getbootstrap.com/utilities/flexbox/

[Zyrus]

เพิ่ม class ใน div row ครับ

โค้ด เลือก ขยาย

<div class="row justify-content-center">

[xcored]

สำหรับ Bootstrap 3
มันก็มีวิธีแก้หลายแบบครับ
หนึ่งในนั้น http://www.bootply.com/aaxnmumOEs

แต่มันก็ยังไม่ค่อย make sense เท่าไหร่
หรืออาจจะต้องใช้ javascript มาช่วย

แต่ถ้าใช้ Bootstrap 4 มันจะมี Flexbox ให้เรียกใช้เลยครับ
https://v4-alpha.getbootstrap.com/utilities/flexbox/

พอมีตัวอย่างของ bootstrap 4 มั้ยครับ แบบนี้ ตอนแรกจะใช้ v4 แต่ โหลดมาแล้วรู้สึกแปลกๆ เลยเปลี่ยนเป็น 3

[xcored]

เพิ่ม class ใน div row ครับ

โค้ด เลือก ขยาย

<div class="row justify-content-center">

แบบนี้เหรอครับ มันยังเหมือนเดิมอะครับ
<div class="row justify-content-center">

[Japam]

ครับผม ลองดูแบบนี้ไหมครับ

<div class="container-fluid">
<div class="row">
<div class=" col-md-2 ">
</div>
<div class=" col-md-8 ">
</div>
<div class=" col-md-2 ">
</div>
</div>
</div>

ลองดูนะครับ แต่เป็นการเขียนที่อาจไม่ถูกต้องครับ ให้แก้ไขได้เฉพาะหน้าครับ

[Zyrus]

เพิ่ม class ใน div row ครับ

โค้ด เลือก ขยาย

<div class="row justify-content-center">

แบบนี้เหรอครับ มันยังเหมือนเดิมอะครับ
<div class="row justify-content-center">

ใช่ครับ bootstrap 4
ถ้าเป็น bootstrap 3 ผมจะใช้ offset เช่น ถ้า 12 col แบ่ง 6 ข้าม 3
= col-md-6 col-md-offset-3
อีกอย่างที่เห็นชอบใช้กันคือลูกผสม
col-md-6 col-sm-12

[xcored]

เพิ่ม class ใน div row ครับ

โค้ด เลือก ขยาย

<div class="row justify-content-center">

แบบนี้เหรอครับ มันยังเหมือนเดิมอะครับ
<div class="row justify-content-center">

ใช่ครับ bootstrap 4
ถ้าเป็น bootstrap 3 ผมจะใช้ offset เช่น ถ้า 12 col แบ่ง 6 ข้าม 3
= col-md-6 col-md-offset-3
อีกอย่างที่เห็นชอบใช้กันคือลูกผสม
col-md-6 col-sm-12

แบบที่ผมต้องการถ้าใช้ v4 จะง่ายกว่าใช่มั้ยครับ
ตอนนี้ผมใช้ boostrap 3 ถ้าเปลี่ยนเป็น 4 ได้มั้ยครับ เหมือแค่เรียกไฟล์ เฉยๆ

[xcored]

ลองเปลี่ยนมาเป็น v4

ผมดันลงมาได้แค่นี้อะครับ


<div class="container-fluid">
<div class="row">
<div class="col-md-6" style="padding-left:0"><img src="img/green.jpg" class=" img-fluid" /></div>
<div class="col-md-6 p-5 h2">CHEMICAL Masterbatch<br />เราผลิตภัณฑ์ ให้สีมีความสม่ำเสมอไม่ผิดเพี้ยน  มีคุณสมบัติด้านความสะดวกต่อการใช้งาน เพื่อตอบสนองความต้องการของลูกค้า</div>
</div>
</div>

[sputtaro]

สำหรับ Bootstrap ถ้าคุณใช้ <p> อาจดีขึ้น หรือง่ายขึ้นครับ
ลองดูแนวตามนี้ครับ
How do you get centered content using Twitter bootstrap?
และอีกตัวอย่าง
Bootstrap - Text-align - Class

ส่วนกรณี แบ่งบล็อกคิดว่าคุณคงหาคำตอบได้แล้ว ผมจึงไม่ขอพูดถึงนะครับ

[xcored]

ขอถามอีกอย่างครับ จากภาพผมวางข้อมูลฉลับแบบนี้อะครับ พอหดหน้าจอเป็นแนวตรงกลายเป็นเรียงแบบ  ภาพ > ข้อความ > ข้อความ > ภาพ อะครับ มันสามารถทำเป็น ภาพ > ข้อความ > ภาพ > ข้อความ ได้มั้ยอครับ เซ็งๆกลายเป็นออกแบบดีไซน์ให้เขียนยากขึ้น เหมือนเพิ่มงานให้ตัวเองเลยครับ

[sputtaro]

คำถามในเม้นท์ที่ 10
เพิ่ม media query ของอุปกรณ์ขนาดเล็ก
โดยใช้คำสั่งพวก pull-right หรือ pull-left เพื่อให้เรียงลำดับตามที่คุณต้องการครับ
(อาจต้องเพิ่ม id ของแต่ละแถวขึ้นมาเป็นการเฉพาะก็ได้)

[xcored]

คำถามในเม้นท์ที่ 10
เพิ่ม media query ของอุปกรณ์ขนาดเล็ก
โดยใช้คำสั่งพวก pull-right หรือ pull-left เพื่อให้เรียงลำดับตามที่คุณต้องการครับ
(อาจต้องเพิ่ม id ของแต่ละแถวขึ้นมาเป็นการเฉพาะก็ได้)

boostrap v 3 มี code pull-left มั้ยครับ ผมไม่เจอ  อ่อ ผมไปดูของ youtube เรียกใช้อีกอย่างเป็น col-md-pus

[sputtaro]

ลองอ่านเพิ่มเติมตามนี้ครับ

ดูแนวทางจากคำตอบแรกเลยครับ (ส่วนคำตอบอื่นๆก็ยังมีประโยชน์เช่นกัน)
Bootstrap 3: pull-right for col-lg only

Bootstrap Grid system

โค้ด เลือก ขยาย

http://getbootstrap.com/css/#grid


Bootstrap Column ordering

โค้ด เลือก ขยาย

http://getbootstrap.com/css/#grid-column-ordering


หวังว่าจะช่วยให้เข้าใจมากขึ้นนะครับ