چرا لایه بندیه بوت استرپ کار نمی کند
سلام دوستان
عذر خواهی می کنم که وقت شما رو میگیرم.
من تازه می خواهم رسپانسیو کردن سایت در بوت استرپ رو یاد بگیرم( در آستانه ی بیست و هشت سالگی)
و یک سوالی برام پیش اومده:
اگر نگاهی به کد زیر بیندازید مشاهده می کنید که من گفته ام اولین div یک ستون جا بگیرد و دومین div یازده ستون جا بگیرد.
اما وقتی صفحه را تا آخرین اندازه کوچک می کنم می بینم که این حالت همیشه برقرار نیست و div دوم به جای اینکه در همان ردیف که div اول است باشد به زیر آن می آید.
ممکن است راهنمایی بفرمایید که چرا این طوری میشود؟
طبق لینک زیر از سایت w3 وقتی بگوییم col-1 یعنی این div باید در اندازه های کمتر از ۵۷۶ پیکسل فقط یک ستون فضا را اشغال کند پس چرا وقتی من مرورگر را کوچک می کنم این طور نیست؟
https://www.w3schools.com/bootstrap4...grid_basic.asp
این کد من است:
کد HTML:
<!DOCTYPE html>
<html>
<head>
<title>hello bootstrap4</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<body>
<div class="container">
<div class="row">
<div class="col-1 bg-success">h</div>
<div class="col-11 bg-primary">hello secend div</div>
</div>
</div>
</body>
</html>
این هم تصویری از فایل خروجی است:
http://www.upsara.com/images/niws_sc...1_18-44-36.png
ممنون از کسانی که راهنمایی می کنند
نقل قول: چرا لایه بندیه بوت استرپ کار نمی کند
سلام خیلی سن خوبی هست شروع به یاد گیری کردی من تقریبا از 32 یا 33 سالگی شروع به بوت استرپ کردم:تشویق:
فکر کنم بایست بیشتر دقت میکردید :لبخندساده: گرید بندی رو تا نصفه یاد گرفتی
اینو بزن درست میشه
کد HTML:
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">123</div>
یادت نره هر div رو بایست برای نمایش در هر دستگاهی مقدار دهی کنی که توی اون دستگاه چقدر ستون اشغال کنه همین
نقل قول: چرا لایه بندیه بوت استرپ کار نمی کند
- .col- (extra small devices - screen width less than 576px)
- .col-sm- (small devices - screen width equal to or greater than 576px)
- .col-md- (medium devices - screen width equal to or greater than 768px)
- .col-lg- (large devices - screen width equal to or greater than 992px)
- .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
منبع :
https://www.w3schools.com/bootstrap4...grid_basic.asp
نقل قول: چرا لایه بندیه بوت استرپ کار نمی کند
فکرنکنم مشکلشون این باشه. چون من هم بوت استرپ همینجوری مثل شما کار میکنم ولی حالا تو document ش خوندم هر سایز صفحه ای اگه تنظیم نشه از کوچیکترش مقدار میگیره. من بوت استرپ ۳ کار میکردم که کوچکترینش col-sm بود ولی ظاهرا تو ۴ اش کوچکترین col هس و قاعدتا چون سایز صفحه های بزرگتر مقداردهی نشدن باید مقدارشون رو از همون بگیرن و باید درست کار کنه که برا منم سواله اشکال کار کجاست.
اینو تو w3schools نوشته:
Tip: Each class scales up, so if you wish to set the same widths for sm and md, you only need to specify sm
نقل قول: چرا لایه بندیه بوت استرپ کار نمی کند
خیلی ممنون از پاسختون
اما من با بوت استرپ ۴ کار می کنم و در بوت استرپ چهار کلاسی برای xs وجود نداره منبع:
https://getbootstrap.com/docs/4.1/layout/overview/
به علاوه شما در کدتون برای اندازه های بیشتر از ۵۷۶ اندازه تعیین کردید من با این اندازه کاری ندارم. سوالی که من دارم در کمترین اندازه ی مرورگرم هست.
همان طور که در عکس مشاهده می کنید به جای اینکه هردو در یک خط باشند دومی اومده در خط پایین قرار گرفته
نقل قول: چرا لایه بندیه بوت استرپ کار نمی کند
دقیقا من همین مطلب رو خوندم و کد فوق رو نوشتم اما همان طور که میبینید کد کاری که ازش انتظار میره رو انجام نداده و سوال من همینه
