ใครเก่ง bootstap ช่วยหน่อยครับ

[noong]

เพิ่งลองเล่น คือผมใช้ php ดึงจากฐานข้อมูลมา ซ้ำๆ  แล้ว ต้องการให้มันเรียงจาก ซ้ายไปขวา ไม่ได้อะครับ มันเรียงจากบนลงล่างอย่างเดียว ขอคำแนะนำหน่อยครับ

[gapgag55]

ลองใส่ class = " row " ดูก่อนนะครับ

<div class="row">
  <div class="col-md-1">.col-md-1</div>
</div>

[noong]

ลองใส่ class = " row " ดูก่อนนะครับ

<div class="row">
  <div class="col-md-1">.col-md-1</div>
</div>

ลองแล้วครับ

<div class="row">
  <div class="col-md-4">
       

<?

$db->connectdb(DB_NAME,DB_USERNAME,DB_PASSWORD);
$res[news] = $db->select_query("SELECT * FROM ".TB_NEWS." ORDER BY id DESC LIMIT 3 ");
while($arr[news] = $db->fetch($res[news])){
   //Comment Icon
   if($arr[news][enable_comment]){
      $CommentIcon = " <IMG SRC=\"images/icon/suggest.gif\" WIDTH=\"2\" HEIGHT=\"9\" BORDER=

\"0\" ALIGN=\"absmiddle\">";
   }else{
      $CommentIcon = "";
   }
?>
         

               <p><A HREF="?name=news&file=readnews&id=<?=$arr[news][id];?>"

target="_blank" class="thumbnail "><IMG SRC="newsicon/<?=$arr[news][post_date];?>.jpg" class="img-

responsive "></A>

<h4><?=$arr[news][topic];?></h4>
<p><?=$arr[news][headline];?></p>
         
<?
}
$db->closedb ();

?></p>


</div>   
</div>


ผลที่ได้

[gapgag55]

เหมือนมันจะอยู่ข้างใน div อีกตัวนึงอะครับ ขอดูโค้ดเต็มได้ไหมครับ 

[9wong]

try it ยังไม่ได้ลองไล่โค๊ดครับ พอดีไม่สะดวก

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


<div class="row">
       

<?

$db->connectdb(DB_NAME,DB_USERNAME,DB_PASSWORD);
$res[news] = $db->select_query("SELECT * FROM ".TB_NEWS." ORDER BY id DESC LIMIT 3 ");
while($arr[news] = $db->fetch($res[news])){
echo '  <div class="col-md-4">';
   //Comment Icon
   if($arr[news][enable_comment]){
      $CommentIcon = " <IMG SRC=\"images/icon/suggest.gif\" WIDTH=\"2\" HEIGHT=\"9\" BORDER=

\"0\" ALIGN=\"absmiddle\">";
   }else{
      $CommentIcon = "";
   }
?>
         

               <p><A HREF="?name=news&file=readnews&id=<?=$arr[news][id];?>"

target="_blank" class="thumbnail "><IMG SRC="newsicon/<?=$arr[news][post_date];?>.jpg" class="img-

responsive "></A>

<h4><?=$arr[news][topic];?></h4>
<p><?=$arr[news][headline];?></p>
  echo '</div> ';       
<?
}
$db->closedb ();

?></p>


 
</div>




bootstap  ใช้เป็นระบบ 12 grid ครับ

อยากได้แบบไหนใส่ class row แล้วก็ตามด้วย col-md-*  ->* คือหมายเลข 1-12
***มันมีหลายตัวมากครับ col-xs สำหรับ พวกโทรศัพท์  col-sm สำหรับ แท็บเล็ต  col-md ก็ desktop  แล้วก็ col-lg สำหรับพวกจอ 1200 px+

ตัวอย่างสมมุติผมอยากจัดเรียงแบบนี้

content1 | content 2 | content 3

ก็เขียน

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


<div class="container">
<div class="row">
<div class="col-md-4">content1</div>
<div class="col-md-4">content 2</div>
<div class="col-md-4">content 3</div>
</div>
</div>

[noong]

เหมือนมันจะอยู่ข้างใน div อีกตัวนึงอะครับ ขอดูโค้ดเต็มได้ไหมครับ 

อ่าผม ปิด div หมดแล้วต่อท้ายนะครับ เริ่มใหม่เลย

<div class="container">

<div class="row">


<div class="col-lg-4">
<div class="list-group-item">   
<img class="img-responsive" src="images/logo.png"><br>      
<?
//แสดงข่าวสาร/ประชาสัมพันธ์
$db->connectdb(DB_NAME,DB_USERNAME,DB_PASSWORD);
$res[news] = $db->select_query("SELECT * FROM ".TB_NEWS." ORDER BY id DESC LIMIT 5 ");
while($arr[news] = $db->fetch($res[news])){
   //Comment Icon
   if($arr[news][enable_comment]){
      $CommentIcon = " <IMG SRC="images/icon/suggest.gif" WIDTH="2" HEIGHT="9" BORDER=

"0" ALIGN="absmiddle">";
   }else{
      $CommentIcon = "";
   }
?>
         

               <p><A HREF="?name=news&file=readnews&id=<?=$arr[news][id];?>"

target="_blank" class="thumbnail "><IMG SRC="newsicon/<?=$arr[news][post_date];?>.jpg" class="img-

responsive "></A>

<h4><?=$arr[news][topic];?></h4>
<p><?=$arr[news][headline];?></p>
         
<?
}
$db->closedb ();
//จบการแสดงข่าวสาร
?></p>

         

</div>
</div>

<!-- End Left -->


<div class="col-md-8">         
<div class="alert alert-info" role="alert">

<?
$FileEditorTalk = "editortalk/editortalk.html";
$FileEditorTalkOpen = @fopen($FileEditorTalk, "r");
$EditorTalkContent = @fread ($FileEditorTalkOpen, @filesize($FileEditorTalk));
@fclose ($FileEditorTalkOpen);
$EditorTalkContent = stripslashes($EditorTalkContent);
echo $EditorTalkContent;
?>
               
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/v/HGTrYJkx-EA"

allowfullscreen="yes"></iframe>
</div>
         


   
<div class="panel panel-danger">
   <div class="panel-heading">
      <h3 class="panel-title">Program Tour Trang | โปรแกรมทัวร์ ตรัง</h3>
   </div></div>

<?
//แสดงบทความ Text Random
$db->connectdb(DB_NAME,DB_USERNAME,DB_PASSWORD);
$res[knowledge] = $db->select_query("SELECT * FROM ".TB_KNOWLEDGE." ORDER BY rand() LIMIT 5 ");
while($arr[knowledge] = $db->fetch($res[knowledge])){
?>   

     
<div class="list-group-item">
<div class="thumbnail clearfix">               
<A HREF="?name=knowledge&file=readknowledge&id=<?=$arr[knowledge][id];?>" target="_blank" >
               
<IMG SRC="knowledgeicon/<?=$arr[knowledge][post_date];?>.jpg" class="pull-right thumbnail" ?></A>
<div class="caption" class="pull-left">

<h4><?=$arr[knowledge][topic];?></h4>
<?=$arr[knowledge][headline];?>
<?if($arr[knowledge][enable_comment]){echo ">";}else{};?><p> <A HREF="?

name=knowledge&file=readknowledge&id=<?=$arr[knowledge][id];?>" target="_blank"  class="btn btn-primary

btn-sm" role="button">More</a></p></div> </div>
</div>

<?
}
$db->closedb ();
//จบการแสดงบทความ Text Random
?>
</div>   
</div>

</div>


   </div>   

//ตรงนี้ครับที่เริ่มใหม่


<div class="container">
<div class="row ">
<div class="col-md-4">


<?
//แสดงข่าวสาร/ประชาสัมพันธ์
$db->connectdb(DB_NAME,DB_USERNAME,DB_PASSWORD);
$res[news] = $db->select_query("SELECT * FROM ".TB_NEWS." ORDER BY id DESC LIMIT 5 ");
while($arr[news] = $db->fetch($res[news])){
   //Comment Icon
   if($arr[news][enable_comment]){
      $CommentIcon = " <IMG SRC="images/icon/suggest.gif" WIDTH="2" HEIGHT="9" BORDER=

"0" ALIGN="absmiddle">";
   }else{
      $CommentIcon = "";
   }
?>
         

               <p><A HREF="?name=news&file=readnews&id=<?=$arr[news][id];?>"

target="_blank" class="thumbnail "><IMG SRC="newsicon/<?=$arr[news][post_date];?>.jpg" class="img-

responsive "></A>

<h4><?=$arr[news][topic];?></h4>
<p><?=$arr[news][headline];?></p>
         
<?
}
$db->closedb ();
//จบการแสดงข่าวสาร
?></p>



</div>

</div>
</div>


   

[noong]

อ่าได้แล้วครับ  ขอบคุณ พี่ๆทุกคนครับผม :wanwan020:เดี๋ยวเสร็จมาลงลิ้งให้ครับ มาเที่ยวตรังกันนะครับ อิอิ

[scanfire]

แก้เสดแล้วเปลี่ยน bg ด้วยนะครับไม่เข้ากันเลย

[noong]

แก้เสดแล้วเปลี่ยน bg ด้วยนะครับไม่เข้ากันเลย

ครับผ้ม 

[JumDaiDee]

เพิ่มเติมนะครับ เท่าที่ผมใช้มา

ถ้าเราเอา <div class="row"> ไว้ใน ลูป มันจะขึ้นบรรทัดใหม่ทันที่

เพราะ แท็ก <div class="row"> มันจะขึ้นบรรัทดใหม่ครับ

ถ้าไม่อยากให้ขึ้นใหม่ก็ทำแบบนี้ครับ
<div class="row">
while($rs = $q->fetch_assoc()){

<div class="col-lg-4"><?=$rs['name']?></div>

}
</div>

เอาแท็ก <div class="row"> ไว้นอกลูป จบครับ