PDA

View Full Version : نمایش گرید بندی افقی باکس مطالب در بوت استرپ


abbas3zaar
سه شنبه 22 خرداد 1397, 16:06 عصر
سلام. من میخوام مطالب سایت رو به صورت باکس مربع مثل تصویر زیر درست کنم:


http://imgurl.ir/uploads/j40109_2222222222.jpg




این کدهای من رو ببینید:




<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div class="col-md-4"> aaaa </div>
<div class="col-md-4"> bbbb </div>
<div class="col-md-4"> cccc </div>
</div>
<!-- end col-md-9-->
<div class="col-md-3">
test
</div>
<!-- end col-md-3-->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end wrapper-->




البته کدهای باکس رو الکی اینجا وارد کردم در کل خواستم فرمت گرید بندی بوت استرپم رو ببینید
خروحیش اینجوری میشه:

http://imgurl.ir/uploads/h1472_123123333.jpg




هر بلوک col-md-4 که دادم زیر هم قرار گرفته.

حتی به div که کلاس col-md-9 داره display flex هم میدم میشه مثل زیر و از سمت چپ صفحه خارج میشه:

http://imgurl.ir/uploads/g188065_123123123.jpg



راهکار چیه؟
hooman_the1
سه شنبه 22 خرداد 1397, 19:22 عصر
سلام
کدتون درست کار می کنه مشکل جای دیگست
نکته : متا تگ viewport رو اضافه کردید ان شاءالله دیگه ؟
abbas3zaar
چهارشنبه 23 خرداد 1397, 09:34 صبح
سلام
کدتون درست کار می کنه مشکل جای دیگست
نکته : متا تگ viewport رو اضافه کردید ان شاءالله دیگه ؟


بله




<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<title>داشبورد سایت</title>
<meta content="MySite" name="description" />
<meta content="Admin" name="author" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- App Icons -->
<link rel="shortcut icon" href="assets/images/favicon.ico">

<!--Morris Chart CSS -->
<link rel="stylesheet" href="assets/plugins/morris/morris.css">

<!-- App css -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />

</head>






کدهای کامل صفحه:




<?php include ('header.php'); ?>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div class="card m-b-30 courseList posRel">
<div class="card-header"> مطالب </div>
<div class="card-body">
<div class="ribbon-wrapper col-lg-4 col-xlg-4 col-md-4 position-relative" style="padding: 0 10px;background-color:#fefefe">
<a href="#" class="ribbon-content course-item">
<div class="img-container" style="height: 180px; overflow: hidden"> <img src="assets/images/bg-1.jpg" class="course-image"> </div>
<p class="title">عنوان مطلب وارد شود</p>
</a>
</div>
<div class="ribbon-wrapper col-lg-4 col-xlg-4 col-md-4 position-relative" style="padding: 0 10px;background-color:#fefefe">
<a href="#" class="ribbon-content course-item">
<div class="img-container" style="height: 180px; overflow: hidden"> <img src="assets/images/bg-1.jpg" class="course-image"> </div>
<p class="title">عنوان مطلب وارد شود</p>
</a>
</div>
<div class="ribbon-wrapper col-lg-4 col-xlg-4 col-md-4 position-relative" style="padding: 0 10px;background-color:#fefefe">
<a href="#" class="ribbon-content course-item">
<div class="img-container" style="height: 180px; overflow: hidden"> <img src="assets/images/bg-1.jpg" class="course-image"> </div>
<p class="title">عنوان مطلب وارد شود</p>
</a>
</div>
<div class="ribbon-wrapper col-lg-4 col-xlg-4 col-md-4 position-relative" style="padding: 0 10px;background-color:#fefefe">
<a href="#" class="ribbon-content course-item">
<div class="img-container" style="height: 180px; overflow: hidden"> <img src="assets/images/bg-1.jpg" class="course-image"> </div>
<p class="title">عنوان مطلب وارد شود</p>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card m-b-30">
<div class="card-header"> جستجو </div>
<div class="card-body"> </div>
</div>
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end wrapper -->
<?php include ('footer.php'); ?>




خروجی کدهای بالا:

http://imgurl.ir/uploads/a832872_01.jpg
abbas3zaar
چهارشنبه 23 خرداد 1397, 09:55 صبح
درست کردم:

داخل کلاس col-md-9 باید یه row تعریف میکردم. به این صورت:



<div class="col-md-9">
<div class="row">
<div class="col-md-4"> aaaa </div>
<div class="col-md-4"> bbbb </div>
<div class="col-md-4"> cccc </div>
</div>
</div>