robinashly
4 سال پیش توسط robinashly مطرح شد
9 پاسخ

سوال در مورد Container-fluid

با سلام
در بوت استرپ من نیاز دارم که از یک سایز به بعد مثلا md یا lg ، کلاس به صورت Container -fluidدر بیاد ولی همچین امکانی برای Container-fluid وجود نداره یعنی نمیتونم بنویسم Container-md-fluid ، و فقط برای کلاس Container این امکان وجود داره.
لطفا راهنمایی بفرمایید.ممنون .


ثبت پرسش جدید
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
0

تکه کد اصلی که نوشتم اینها میشه:

// 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>

Mohammad reza Golshahi
تخصص : Go - Python
@golshahimohammadreza 4 سال پیش مطرح شد
1

سلام دوست عزیز
@robinashly

طبق مستندات بوت استرب container-fluid رو یا عرض صد درصد معرفی کرده است پس نمیتوان ریسپانسیوی برای آن در نظر گرفت چون در تمامی در هر حالت عرض شما 100 % است پس container-md-fluid یا ... مفهومی ندارد.


robinashly
@robinashly 4 سال پیش مطرح شد
1

@golshahimohammadreza
@milad
سلام بر شما
بله اینو اشاره کرده بودم که در حال حاضر همچین چیزی نداره ، ولی من نیاز دارم که در ابتدا در حالت Mobile first کلاسش به صورت container. باشه و بعد از گذشت از حالت md به صورت Container-fluid در بیاد..
فکر میکنم در کل خودم باید کلاسی تعریف کنم و از مدیا کوئری ها استفاده کنم .درسته ؟


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
-1

سوال تون دو پهلو هستش،
حالت اول) مثلا می خواید از صفر تا 768 پیکسل، بصورت container (حاشیه دار) باشه و از 768 تا اندازه های بالاتر Container-fluid (تمام عرض) باشه؟
یا اینکه
حالت دوم) می خواید از صفر تا 768 پیکسل، بصورت Container-fluid (تمام عرض) باشه و از 768 تا اندازه های بالاتر container (حاشیه دار) باشه؟

حالت اول یا حالت دوم؟


robinashly
@robinashly 4 سال پیش مطرح شد
1

@milad
سلام
حالت اول درسته . می خوام از صفر تا ۷۶۸ پیکسل، بصورت container (حاشیه دار) باشه و از ۷۶۸ تا اندازه های بالاتر Container-fluid (تمام عرض)


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

فکر نمی کنم با خود کلاس های بوت استرپ بشه پیاده سازی کرد، ولی پیاده سازیش به صورت دستی هم خیلی سادس.

<!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>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
0

تکه کد اصلی که نوشتم اینها میشه:

// 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>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

راستی سلام، ببخشید من خیلی حواسم به سوالتون بود، سلام یادم رفت 😅


robinashly
@robinashly 4 سال پیش آپدیت شد
1

خواهش میکنم این چه حرفیه ، همین که وقت میزارید سوالمون رو جواب میدین خودش کلیه ، ممنونم از لطفتون مچکرم .
@milad


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

@robinashly
خواهش میکنم، کاری نکردم.
سرزنده باشید 👍


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام