سوال در مورد Container-fluid
با سلام
در بوت استرپ من نیاز دارم که از یک سایز به بعد مثلا md یا lg ، کلاس به صورت Container -fluidدر بیاد ولی همچین امکانی برای Container-fluid وجود نداره یعنی نمیتونم بنویسم Container-md-fluid ، و فقط برای کلاس Container این امکان وجود داره.
لطفا راهنمایی بفرمایید.ممنون .
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
تکه کد اصلی که نوشتم اینها میشه:
// css:
@media (min-width: 768px) {
.fluid-md {
max-width: 100%;
}
}
// html:
<div class="container fluid-md">
<h1>with fluid-md</h1>
<p>This part is inside a .container .fluid-md class.</p>
</div>سلام دوست عزیز
@robinashly
طبق مستندات بوت استرب container-fluid رو یا عرض صد درصد معرفی کرده است پس نمیتوان ریسپانسیوی برای آن در نظر گرفت چون در تمامی در هر حالت عرض شما 100 % است پس container-md-fluid یا ... مفهومی ندارد.
@golshahimohammadreza
@milad
سلام بر شما
بله اینو اشاره کرده بودم که در حال حاضر همچین چیزی نداره ، ولی من نیاز دارم که در ابتدا در حالت Mobile first کلاسش به صورت container. باشه و بعد از گذشت از حالت md به صورت Container-fluid در بیاد..
فکر میکنم در کل خودم باید کلاسی تعریف کنم و از مدیا کوئری ها استفاده کنم .درسته ؟
سوال تون دو پهلو هستش،
حالت اول) مثلا می خواید از صفر تا 768 پیکسل، بصورت container (حاشیه دار) باشه و از 768 تا اندازه های بالاتر Container-fluid (تمام عرض) باشه؟
یا اینکه
حالت دوم) می خواید از صفر تا 768 پیکسل، بصورت Container-fluid (تمام عرض) باشه و از 768 تا اندازه های بالاتر container (حاشیه دار) باشه؟
حالت اول یا حالت دوم؟
@milad
سلام
حالت اول درسته . می خوام از صفر تا ۷۶۸ پیکسل، بصورت container (حاشیه دار) باشه و از ۷۶۸ تا اندازه های بالاتر Container-fluid (تمام عرض)
فکر نمی کنم با خود کلاس های بوت استرپ بشه پیاده سازی کرد، ولی پیاده سازیش به صورت دستی هم خیلی سادس.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
@media (min-width: 768px) {
.fluid-md {
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="container fluid-md">
<h1>with fluid-md</h1>
<p>This part is inside a .container .fluid-md class.</p>
<p>The .container class provides a responsive fixed width container.</p>
<p>Resize the browser window to see that its width (max-width) will change at different breakpoints.</p>
</div>
<div class="container">
<h1>without fluid-md</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
<p>Resize the browser window to see that its width (max-width) will change at different breakpoints.</p>
</div>
</body>
</html>
تکه کد اصلی که نوشتم اینها میشه:
// css:
@media (min-width: 768px) {
.fluid-md {
max-width: 100%;
}
}
// html:
<div class="container fluid-md">
<h1>with fluid-md</h1>
<p>This part is inside a .container .fluid-md class.</p>
</div>خواهش میکنم این چه حرفیه ، همین که وقت میزارید سوالمون رو جواب میدین خودش کلیه ، ممنونم از لطفتون مچکرم .
@milad