ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingช่วยดูหน่อยครับ Boostrap จะวางขอมูลแบ่งครึ่ง อย่างละ6 colum แล้วให้อยู่ตรงกลาง
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: ช่วยดูหน่อยครับ Boostrap จะวางขอมูลแบ่งครึ่ง อย่างละ6 colum แล้วให้อยู่ตรงกลาง  (อ่าน 960 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
xcored
Newbie
*

พลังน้ำใจ: 0
ออฟไลน์ ออฟไลน์

กระทู้: 8



ดูรายละเอียด
« เมื่อ: 16 มกราคม 2017, 13:56:15 »

ช่วยดูหน่อยครับ 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


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

« แก้ไขครั้งสุดท้าย: 16 มกราคม 2017, 13:59:09 โดย xcored » บันทึกการเข้า
nut_anek
Verified Seller
สมุนแก๊งเสียว
*

พลังน้ำใจ: 149
ออฟไลน์ ออฟไลน์

กระทู้: 980



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 16 มกราคม 2017, 14:45:02 »

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

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

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


บันทึกการเข้า

Zyrus
สมุนแก๊งเสียว
*

พลังน้ำใจ: 41
ออฟไลน์ ออฟไลน์

กระทู้: 514



ดูรายละเอียด
« ตอบ #2 เมื่อ: 16 มกราคม 2017, 14:52:33 »

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

โค๊ด:
<div class="row justify-content-center">
บันทึกการเข้า
xcored
Newbie
*

พลังน้ำใจ: 0
ออฟไลน์ ออฟไลน์

กระทู้: 8



ดูรายละเอียด
« ตอบ #3 เมื่อ: 16 มกราคม 2017, 14:52:39 »

สำหรับ 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
Newbie
*

พลังน้ำใจ: 0
ออฟไลน์ ออฟไลน์

กระทู้: 8



ดูรายละเอียด
« ตอบ #4 เมื่อ: 16 มกราคม 2017, 15:00:52 »

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

โค๊ด:
<div class="row justify-content-center">

แบบนี้เหรอครับ มันยังเหมือนเดิมอะครับ
<div class="row justify-content-center">
บันทึกการเข้า
Japam
Newbie
*

พลังน้ำใจ: 6
ออฟไลน์ ออฟไลน์

กระทู้: 69



ดูรายละเอียด
« ตอบ #5 เมื่อ: 16 มกราคม 2017, 15:05:02 »

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

<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
สมุนแก๊งเสียว
*

พลังน้ำใจ: 41
ออฟไลน์ ออฟไลน์

กระทู้: 514



ดูรายละเอียด
« ตอบ #6 เมื่อ: 16 มกราคม 2017, 15:54:45 »

เพิ่ม 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
Newbie
*

พลังน้ำใจ: 0
ออฟไลน์ ออฟไลน์

กระทู้: 8



ดูรายละเอียด
« ตอบ #7 เมื่อ: 16 มกราคม 2017, 15:59:13 »

เพิ่ม 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 ได้มั้ยครับ เหมือแค่เรียกไฟล์ เฉยๆ
« แก้ไขครั้งสุดท้าย: 16 มกราคม 2017, 16:04:39 โดย xcored » บันทึกการเข้า
xcored
Newbie
*

พลังน้ำใจ: 0
ออฟไลน์ ออฟไลน์

กระทู้: 8



ดูรายละเอียด
« ตอบ #8 เมื่อ: 16 มกราคม 2017, 17:12:47 »

ลองเปลี่ยนมาเป็น 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
สมุนแก๊งเสียว
*

พลังน้ำใจ: 139
ออฟไลน์ ออฟไลน์

กระทู้: 910



ดูรายละเอียด
« ตอบ #9 เมื่อ: 16 มกราคม 2017, 17:26:06 »

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

ส่วนกรณี แบ่งบล็อกคิดว่าคุณคงหาคำตอบได้แล้ว ผมจึงไม่ขอพูดถึงนะครับ
« แก้ไขครั้งสุดท้าย: 16 มกราคม 2017, 17:31:36 โดย sputtaro » บันทึกการเข้า
xcored
Newbie
*

พลังน้ำใจ: 0
ออฟไลน์ ออฟไลน์

กระทู้: 8



ดูรายละเอียด
« ตอบ #10 เมื่อ: 16 มกราคม 2017, 17:36:17 »

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

« แก้ไขครั้งสุดท้าย: 16 มกราคม 2017, 17:36:57 โดย xcored » บันทึกการเข้า
sputtaro
สมุนแก๊งเสียว
*

พลังน้ำใจ: 139
ออฟไลน์ ออฟไลน์

กระทู้: 910



ดูรายละเอียด
« ตอบ #11 เมื่อ: 16 มกราคม 2017, 18:03:54 »

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

พลังน้ำใจ: 0
ออฟไลน์ ออฟไลน์

กระทู้: 8



ดูรายละเอียด
« ตอบ #12 เมื่อ: 16 มกราคม 2017, 19:46:26 »

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


boostrap v 3 มี code pull-left มั้ยครับ ผมไม่เจอ  อ่อ ผมไปดูของ youtube เรียกใช้อีกอย่างเป็น col-md-pus
« แก้ไขครั้งสุดท้าย: 16 มกราคม 2017, 19:47:54 โดย xcored » บันทึกการเข้า
sputtaro
สมุนแก๊งเสียว
*

พลังน้ำใจ: 139
ออฟไลน์ ออฟไลน์

กระทู้: 910



ดูรายละเอียด
« ตอบ #13 เมื่อ: 16 มกราคม 2017, 20:58:59 »

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

ดูแนวทางจากคำตอบแรกเลยครับ (ส่วนคำตอบอื่นๆก็ยังมีประโยชน์เช่นกัน)
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


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


« แก้ไขครั้งสุดท้าย: 16 มกราคม 2017, 21:08:04 โดย sputtaro » บันทึกการเข้า
หน้า: [1]   ขึ้นบน
พิมพ์