iT邦幫忙

0

不好意思請問前輩 rwd購物網站 從電腦大小稍微縮小網頁 商品卡區 從3*2 馬上變6*1 怎麼修改 感謝各位

我重放有圖片的檔案
https://mega.nz/#!zooEUYIT!1LqpUQOezh8GEZf3hYNxXZKgunUB-VzZZukX5UT3rQo

-這個部分是我自己改的 還有head內 其他php部份 基本都是書上複製的
-想說可能是這個區塊頭三個div rwd出錯

                        <div class="col-sm-4 col-md-6 ">
                            <div class="card">
                              <div class="picDiv">
                              <a href="product.php?id=<?php echo $row_RecProduct["productid"];?>">
                                <img class="card-img-top" src="proimg/<?php echo $row_RecProduct["productimages"];?>" 
                                alt="<?php echo $row_RecProduct["productname"];?>">
                              </a>
                              </div>
                                <div class="card-body">
                                    <h4 class="card-title"></h4>
                                   
                                    <h5 class="card-text text-danger">NT$ <?php echo $row_RecProduct["productprice"];?></h5>
                                    
                                    <a href="product.php?id=<?php echo $row_RecProduct["productid"];?>">
                                    <?php echo $row_RecProduct["productname"];?></a>
                                      
                                    <!--<a href="cart.html" class="btn btn-outline-primary btn-block">加入購物車</a>-->
                                </div>   </div>    </div>     </div></div>       </div></div>

-不好意思請問前輩 rwd購物網站 從電腦大小稍微縮小網頁 商品卡區 從2^3 馬上變6^1 怎麼修改才能先變3^2 再到6^1
-程式碼80%近尾聲處 red部份是我自己改 能否幫小弟修改 或換更好的方式排版 感謝
-引入檔內容如下

<?php
	//資料庫主機設定
	$db_host = "localhost";
	$db_username = "root";
	$db_password = "1234";
	$db_name = "phpcart";
	//連線資料庫
	$db_link = @new mysqli($db_host, $db_username, $db_password, $db_name);
	//錯誤處理
	if ($db_link->connect_error != "") {
		echo "資料庫連結失敗!";
	}else{
		//設定字元集與編碼
		$db_link->query("SET NAMES 'utf8'");
	}
?>
<?php
require_once("connMysql.php");
//預設每頁筆數
$pageRow_records = 6;
//預設頁數
$num_pages = 1;
//若已經有翻頁,將頁數更新
if (isset($_GET['page'])) {
  $num_pages = $_GET['page'];
}
//本頁開始記錄筆數 = (頁數-1)*每頁記錄筆數
$startRow_records = ($num_pages -1) * $pageRow_records;
//若有分類關鍵字時未加限制顯示筆數的SQL敘述句
if(isset($_GET["cid"])&&($_GET["cid"]!="")){
	$query_RecProduct = "SELECT * FROM product WHERE categoryid=? ORDER BY productid DESC";
	$stmt = $db_link->prepare($query_RecProduct);
	$stmt->bind_param("i", $_GET["cid"]);
//若有搜尋關鍵字時未加限制顯示筆數的SQL敘述句
}elseif(isset($_GET["keyword"])&&($_GET["keyword"]!="")){
	$query_RecProduct = "SELECT * FROM product WHERE productname LIKE ? OR description LIKE ? ORDER BY productid DESC";
	$stmt = $db_link->prepare($query_RecProduct);
	$keyword = "%".$_GET["keyword"]."%";
	$stmt->bind_param("ss", $keyword, $keyword);	
//若有價格區間關鍵字時未加限制顯示筆數的SQL敘述句
}elseif(isset($_GET["price1"]) && isset($_GET["price2"]) && ($_GET["price1"]<=$_GET["price2"])){
	$query_RecProduct = "SELECT * FROM product WHERE productprice BETWEEN ? AND ? ORDER BY productid DESC";
	$stmt = $db_link->prepare($query_RecProduct);
	$stmt->bind_param("ii", $_GET["price1"], $_GET["price1"]);
//預設狀況下未加限制顯示筆數的SQL敘述句
}else{
	$query_RecProduct = "SELECT * FROM product ORDER BY productid DESC";
	$stmt = $db_link->prepare($query_RecProduct);
}
$stmt->execute();
//以未加上限制顯示筆數的SQL敘述句查詢資料到 $all_RecProduct 中
$all_RecProduct = $stmt->get_result();
//計算總筆數
$total_records = $all_RecProduct->num_rows;
//計算總頁數=(總筆數/每頁筆數)後無條件進位。
$total_pages = ceil($total_records/$pageRow_records);
//繫結產品目錄資料
$query_RecCategory = "SELECT category.categoryid, category.categoryname, category.categorysort, count(product.productid) as productNum FROM category LEFT JOIN product ON category.categoryid = product.categoryid GROUP BY category.categoryid, category.categoryname, category.categorysort ORDER BY category.categorysort ASC";
$RecCategory = $db_link->query($query_RecCategory);
//計算資料總筆數
$query_RecTotal = "SELECT count(productid) as totalNum FROM product";
$RecTotal = $db_link->query($query_RecTotal);
$row_RecTotal = $RecTotal->fetch_assoc();
//返回 URL 參數
function keepURL(){
	$keepURL = "";
	if(isset($_GET["keyword"])) $keepURL.="&keyword=".urlencode($_GET["keyword"]);
	if(isset($_GET["price1"])) $keepURL.="&price1=".$_GET["price1"];
	if(isset($_GET["price2"])) $keepURL.="&price2=".$_GET["price2"];	
	if(isset($_GET["cid"])) $keepURL.="&cid=".$_GET["cid"];
	return $keepURL;
}
?>

<html>
<head>  

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />-->
<title>網路購物系統</title>
<link href="style.css" rel="stylesheet" type="text/css">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.1.0/addons/bootstrap/jquery.smartmenus.bootstrap.min.css" rel="stylesheet"></link>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.1.0/jquery.smartmenus.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.1.0/addons/bootstrap/jquery.smartmenus.bootstrap.min.js'></script>

</head>
<!--
<div class="container pt-5 pb-5">
            <div class="row">
                 
                <div class="col-12 col-md-9">
                    <div class="row">
                        <div class="col-12 col-sm-6 col-md-4 mb-3">
                            <div class="card">
                                <img class="card-img-top" src="./images/product/eva_1.jpg" alt="LTG-BY-0001">
                                <div class="card-body">
                                    <h4 class="card-title">LTG-BY-0001</h4>
                                    <p class="card-text">專利樣式雙色登山拐杖握把,EVA發泡材質</p>
                                    <h5 class="card-text text-danger">NT$ 500</h5>
                                    <a href="product.html" class="btn btn-outline-secondary btn-block">查看商品</a>
                                    <a href="cart.html" class="btn btn-outline-primary btn-block">加入購物車</a>
                                </div>
                            </div>
                        </div>
                      </div>
                </div>
                        
             </div>
 </div>
-->
        <!--下拉選單-->
        
        </div>
        <!--導覽列-->
<body>
 
            <?php
            //加上限制顯示筆數的SQL敘述句,由本頁開始記錄筆數開始,每頁顯示預設筆數
            $query_limit_RecProduct = $query_RecProduct." LIMIT {$startRow_records}, {$pageRow_records}";
            //以加上限制顯示筆數的SQL敘述句查詢資料到 $RecProduct 中
            $stmt = $db_link->prepare($query_limit_RecProduct);
			//若有分類關鍵字時未加限制顯示筆數的SQL敘述句
			if(isset($_GET["cid"])&&($_GET["cid"]!="")){
				$stmt->bind_param("i", $_GET["cid"]);
			//若有搜尋關鍵字時未加限制顯示筆數的SQL敘述句
			}elseif(isset($_GET["keyword"])&&($_GET["keyword"]!="")){
				$keyword = "%".$_GET["keyword"]."%";
				$stmt->bind_param("ss", $keyword, $keyword);	
			//若有價格區間關鍵字時未加限制顯示筆數的SQL敘述句
			}elseif(isset($_GET["price1"]) && isset($_GET["price2"]) && ($_GET["price1"]<=$_GET["price2"])){
				$stmt->bind_param("ii", $_GET["price1"], $_GET["price2"]);
			}
            $stmt->execute();            
            $RecProduct = $stmt->get_result();
            while($row_RecProduct=$RecProduct->fetch_assoc()){ 
            ?>
           
 </div> </div></div>

                        <div class="col-sm-4 col-md-6 ">
                            <div class="card">
                              <div class="picDiv">
                              <a href="product.php?id=<?php echo $row_RecProduct["productid"];?>">
                                <img class="card-img-top" src="proimg/<?php echo $row_RecProduct["productimages"];?>" 
                                alt="<?php echo $row_RecProduct["productname"];?>">
                              </a>
                              </div>
                                <div class="card-body">
                                    <h4 class="card-title"></h4>
                                   
                                    <h5 class="card-text text-danger">NT$ <?php echo $row_RecProduct["productprice"];?></h5>
                                    
                                    <a href="product.php?id=<?php echo $row_RecProduct["productid"];?>">
                                    <?php echo $row_RecProduct["productname"];?></a>
                                      
                                    <!--<a href="cart.html" class="btn btn-outline-primary btn-block">加入購物車</a>-->
                                </div>   </div>    </div>     </div></div>       </div></div>

          
            <?php }?>
            <div class="navDiv">
              <?php if ($num_pages > 1) { // 若不是第一頁則顯示 ?>
              <a href="?page=1<?php echo keepURL();?>">|<</a> <a href="?page=<?php echo $num_pages-1;?><?php echo keepURL();?>"><<</a>
              <?php }else{?>
              |< <<
              <?php }?>
              <?php
  	  for($i=1;$i<=$total_pages;$i++){
  	  	  if($i==$num_pages){
  	  	  	  echo $i." ";
  	  	  }else{
  	  	      $urlstr = keepURL();
  	  	      echo "<a href=\"?page=$i$urlstr\">$i</a> ";
  	  	  }
  	  }
  	  ?>
              <?php if ($num_pages < $total_pages) { // 若不是最後一頁則顯示 ?>
              <a href="?page=<?php echo $num_pages+1;?><?php echo keepURL();?>">>></a> <a href="?page=<?php echo $total_pages;?><?php echo keepURL();?>">>|</a>
              <?php }else{?>
              >> >|
              <?php }?>
            </div></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="30" align="center" background="images/album_r2_c1.jpg" class="trademark">© 2016 eHappy Studio All Rights Reserved.</td>
  </tr>
</table>
</body>
</html>
<?php
$stmt->close();
$db_link->close();
?>
有BOOTSTRAP啊,你有載入這個卻沒去用他設好的CSS CLASS
https://getbootstrap.com/docs/4.3/layout/grid/ 這邊讀懂了,就很好弄了
還有其他的部分建議樓主仔細參考,會縮短很多排板的時間的

1 個回答

1
小魚
iT邦大師 1 級 ‧ 2019-11-15 08:38:31
最佳解答

RWD一般是用寬度來調整,
CSS可以使用media,
CSS @media Rule
只是 3*2 變成 6*1 能看嗎?

看更多先前的回應...收起先前的回應...
dragonH iT邦大師 1 級 ‧ 2019-11-15 09:07:41 檢舉

只是 32 變成 61 能看嗎?

他說的應該是 card 的數量

2 * 3 = 兩列三個之類的

fillano iT邦超人 1 級 ‧ 2019-11-15 09:16:17 檢舉
</head>
...
</div>
...
<body>

你的html部份看起來有點怪XD

fillano iT邦超人 1 級 ‧ 2019-11-15 09:27:02 檢舉

然後

<body>
<?php
...
while(...) {
?>
</div></div></div>

看起來也有點怪XD

impuls51e iT邦新手 5 級 ‧ 2019-11-15 09:39:48 檢舉

想說是不是這個區塊頭三個div rwd 寫錯

<div class="col-sm-4 col-md-6 ">
                            <div class="card">
                              <div class="picDiv">
                              <a href="product.php?id=<?php echo $row_RecProduct["productid"];?>">
                                <img class="card-img-top" src="proimg/<?php echo $row_RecProduct["productimages"];?>" 
                                alt="<?php echo $row_RecProduct["productname"];?>">
                              </a>
                              </div>
                                <div class="card-body">
                                    <h4 class="card-title"></h4>
                                   
                                    <h5 class="card-text text-danger">NT$ <?php echo $row_RecProduct["productprice"];?></h5>
                                    
                                    <a href="product.php?id=<?php echo $row_RecProduct["productid"];?>">
                                    <?php echo $row_RecProduct["productname"];?></a>
                                      
                                    <!--<a href="cart.html" class="btn btn-outline-primary btn-block">加入購物車</a>-->
                                </div>   </div>    </div>     </div></div>       </div></div>
impuls51e iT邦新手 5 級 ‧ 2019-11-15 09:43:52 檢舉

應該是rwd部分出錯 其餘應該跟rwd沒關係

impuls51e iT邦新手 5 級 ‧ 2019-11-15 10:02:21 檢舉

刪程式碼沒刪到 這部分沒有用到了


<body>
<?php
...
while(...) {
?>
</div></div></div>

impuls51e iT邦新手 5 級 ‧ 2019-11-15 10:41:49 檢舉

不能變6^1
至少希望能2^3變3^2
另一本書上是用card沒錯 不過我刪掉

impuls51e iT邦新手 5 級 ‧ 2019-11-15 10:55:04 檢舉

我是做過用row沒用到card的方式
那種不能跑這種php 會只有6^1

rwd參考這個改成上面的碼


<div class="container pt-5 pb-5">
            <div class="row">
                 
                <div class="col-12 col-md-9">
                    <div class="row">
                        <div class="col-12 col-sm-6 col-md-4 mb-3">
                            <div class="card">
                                <img class="card-img-top" src="./images/product/eva_1.jpg" alt="LTG-BY-0001">
                                <div class="card-body">
                                    <h4 class="card-title">LTG-BY-0001</h4>
                                    <p class="card-text">專利樣式雙色登山拐杖握把,EVA發泡材質</p>
                                    <h5 class="card-text text-danger">NT$ 500</h5>
                                    <a href="product.html" class="btn btn-outline-secondary btn-block">查看商品</a>
                                    <a href="cart.html" class="btn btn-outline-primary btn-block">加入購物車</a>
                                </div>
                            </div>
                        </div>
                      </div>
                </div>
                        
             </div>
 </div>
小魚 iT邦大師 1 級 ‧ 2019-11-15 11:00:47 檢舉

如果是Card數量就很簡單,
這我以前有做在自己測試的購物車上,
只要把寬度調整就可以,
一行3個就是每個Card 1/3,
(要考慮margin等, 可能要微調)

.card {
    width: 33%;
}

一行6個就是每個Card 1/6,

.card {
    width: 16%;
}

依此類推,
就可以做出你想要的效果出來.
這部份你就要自己寫,
不要用BootStrap的網格了,
除非他的效果剛好是你要的.
甚至有時候為了margin我會覆寫掉網格的定義,
(不過外面包一個class, 才不會影響到其他的)

dragonH iT邦大師 1 級 ‧ 2019-11-15 12:03:29 檢舉

怎麼會把 width: x% 寫在 .card/images/emoticon/emoticon17.gif

這樣會很難用吧

.card 應該保持 width: 100%

實際的排板寬度

應該交給其他 class 去處理

而且 .card 的重點應該也不在 width 才對

像 bootstrap 的規劃其實就不錯

3 x 2
<div class = "row">
  <div class = "col-md-4">
    <div class = "card"/>
  </div>
  <div class = "col-md-4">
    <div class = "card"/>
  </div>
  <div class = "col-md-4">
    <div class = "card"/>
  </div>
</div>

<div class = "row">
  <div class = "col-md-4">
    <div class = "card"/>
  </div>
  <div class = "col-md-4">
    <div class = "card"/>
  </div>
  <div class = "col-md-4">
    <div class = "card"/>
  </div>
</div>
小魚 iT邦大師 1 級 ‧ 2019-11-15 13:22:11 檢舉

dragonH
沒注意到,
card已經是BootStrap的Class,
那就自己定義一個Class吧,
如 .MyCard之類的 (疑

而且他的需求是同一個Class要換寬度,
BootStrap的變化應該有限吧,
我之前做的是最大寬度一行4個圖片,
縮小一些變3個圖片,
再縮小一些變2個圖片,
最小的是1個圖片,
不過如果BootStrap本身的Class已經符合需求的話,
直接用BootStrap的就好了...

dragonH iT邦大師 1 級 ‧ 2019-11-15 13:32:49 檢舉

沒啦 我的意思是

.card 這個 class 做成類似 component 的型式

.card 就只需專注於他應該專注的東西

排版寬度之類的東西

就交給專門負責排版的 class

這樣應該會比較靈活 /images/emoticon/emoticon12.gif

以上都是說如果要自己刻的情況

小魚 iT邦大師 1 級 ‧ 2019-11-15 16:52:25 檢舉

dragonH
那還是需要有一個class來做這件事啊,
隨便你怎麼幫他命名吧...

impuls51e iT邦新手 5 級 ‧ 2019-11-15 18:19:26 檢舉

非常感謝各位 用media mycard 幾經修改 大致完成了

我要發表回答

立即登入回答