shahin53
سه شنبه 30 مرداد 1397, 18:17 عصر
سلام دوستان
عذر خواهی می کنم که وقت شما رو میگیرم.
من تازه می خواهم رسپانسیو کردن سایت در بوت استرپ رو یاد بگیرم( در آستانه ی بیست و هشت سالگی)
و یک سوالی برام پیش اومده:
اگر نگاهی به کد زیر بیندازید مشاهده می کنید که من گفته ام اولین div یک ستون جا بگیرد و دومین div یازده ستون جا بگیرد.
اما وقتی صفحه را تا آخرین اندازه کوچک می کنم می بینم که این حالت همیشه برقرار نیست و div دوم به جای اینکه در همان ردیف که div اول است باشد به زیر آن می آید.
ممکن است راهنمایی بفرمایید که چرا این طوری میشود؟
طبق لینک زیر از سایت w3 وقتی بگوییم col-1 یعنی این div باید در اندازه های کمتر از ۵۷۶ پیکسل فقط یک ستون فضا را اشغال کند پس چرا وقتی من مرورگر را کوچک می کنم این طور نیست؟
https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp
این کد من است:
<!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_screenshot_from_2018-08-21_18-44-36.png
ممنون از کسانی که راهنمایی می کنند
عذر خواهی می کنم که وقت شما رو میگیرم.
من تازه می خواهم رسپانسیو کردن سایت در بوت استرپ رو یاد بگیرم( در آستانه ی بیست و هشت سالگی)
و یک سوالی برام پیش اومده:
اگر نگاهی به کد زیر بیندازید مشاهده می کنید که من گفته ام اولین div یک ستون جا بگیرد و دومین div یازده ستون جا بگیرد.
اما وقتی صفحه را تا آخرین اندازه کوچک می کنم می بینم که این حالت همیشه برقرار نیست و div دوم به جای اینکه در همان ردیف که div اول است باشد به زیر آن می آید.
ممکن است راهنمایی بفرمایید که چرا این طوری میشود؟
طبق لینک زیر از سایت w3 وقتی بگوییم col-1 یعنی این div باید در اندازه های کمتر از ۵۷۶ پیکسل فقط یک ستون فضا را اشغال کند پس چرا وقتی من مرورگر را کوچک می کنم این طور نیست؟
https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp
این کد من است:
<!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_screenshot_from_2018-08-21_18-44-36.png
ممنون از کسانی که راهنمایی می کنند