علیرضا مه آبادی
3 سال پیش توسط علیرضا مه آبادی مطرح شد
6 پاسخ

صفحه بندی با بوت استرپ

توضیح تصویر رو وارد کنید
سلام وقت بخیر
این قسمتی از صفحه بندی من هست ولی مشکلی که هست اینه که میخام اون باکس تیره روبروی باکس سوال اول قرار بگیره ولی به محظ اضافه شدن باکس سوال جدید باکس تیره هم پایین میاد و روبروی اون قرار میگیره خواستم بپرسم راه حلش چیه که باکس تیره همیشه روبروی باکس سوال بشه

<div class=" container-fluid row mr-1 " style="">

          <div class=" col-lg-8 col-md-6 col-sm-12 ">
            <div class="card my-3  rounded-lg mr-  ">
              <div class="card-body shadow ">
                <blockquote class="blockquote mb-0">
                  <div class=" d-flex">
                    <p style="font-size: x-large; font-weight: bold; "><a class="" href="">کاربران چطور به سایت کاربر محور جذب می شون</a></p>
                    <p class=" text-success" style="margin-right: auto; font-size: 16px;">6پاسخ</p>
                  </div>
                  <div class=" d-flex">
                    <img class="img-profile rounded-circle mr-1 " style="width: 60px; height: 60px;"
                    src="./circled-user-male-skin-type-1-2.png">
                    <p class="mt-3 text-secondary" style="font-size: 15px;">۱ ساعت پیش
                      توسط علیرضا آپدیت شد</p>
                   </div>
                  <footer class="blockquote-footer text-dark">سلام به همه دوستان . من یه سایتی بالا آوردم ، که یه بخش مقالات داره و یه بخش گفتگو ها ،     ادیتور حرفه ای نوشتن داره و کاملا ریل تایم هست کل سایت . سایت کاربر محور هست و قرار محتوا در زمینه های علوم اسلامی و مبانی انقلاب اسلامی تولید بشه ، اما نمی دونم چطور باید کاربران به سایت جذب ب <cite title="Source Title"></cite></footer>
                  <div class=" d-flex">
                    <div class=" btn btn-danger mr-auto">حذف</div>
                  </div>
                </blockquote>
              </div>
            </div>
          </div>

          <div class=" col-lg-8 col-md-6 col-sm-12 ">
            <div class="card my-3  rounded-lg mr-  ">
              <div class="card-body shadow ">
                <blockquote class="blockquote mb-0">
                  <div class=" d-flex">
                    <p style="font-size: x-large; font-weight: bold; "><a class="" href="">کاربران چطور به سایت کاربر محور جذب می شون</a></p>
                    <p class=" text-success" style="margin-right: auto; font-size: 16px;">6پاسخ</p>
                  </div>
                  <div class=" d-flex">
                    <img class="img-profile rounded-circle mr-1 " style="width: 60px; height: 60px;"
                    src="./circled-user-male-skin-type-1-2.png">
                    <p class="mt-3 text-secondary" style="font-size: 15px;">۱ ساعت پیش
                      توسط علیرضا آپدیت شد</p>
                   </div>
                  <footer class="blockquote-footer text-dark">سلام به همه دوستان . من یه سایتی بالا آوردم ، که یه بخش مقالات داره و یه بخش گفتگو ها ،     ادیتور حرفه ای نوشتن داره و کاملا ریل تایم هست کل سایت . سایت کاربر محور هست و قرار محتوا در زمینه های علوم اسلامی و مبانی انقلاب اسلامی تولید بشه ، اما نمی دونم چطور باید کاربران به سایت جذب ب <cite title="Source Title"></cite></footer>
                  <div class=" d-flex">
                    <div class=" btn btn-danger mr-auto">حذف</div>
                  </div>
                </blockquote>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 col-sm-12 " style="margin-bottom: 20%;">
            <div class="card  bg-dark shadow rounded-lg mt-3 text-light ">
              <div class="card-header ">
                کاربران برتر
              </div>
              <div class="card-body ">
                <blockquote class="blockquote mb-0">
                  <div class=" d-flex">
                    <img class="img-profile rounded-circle mr-1 " style="width: 60px; height: 60px; border: 3px solid green"
                    src="./circled-user-male-skin-type-1-2.png">
                    <p class="mt-3 mr-3" style="font-size: 15px; font-size: large;">
                      علیرضا</p>
                      <span class=" mr-auto mt-2">1780</span>
                   </div>
                </blockquote>
              </div>
            </div>
          </div>

ثبت پرسش جدید
Banana Life
@shift.delete 3 سال پیش آپدیت شد
0

سلام
شما باکس تیره را position: absolute قرار بدید و مکانش رو از left- چپ و top-بالا مشخص کنید و برای ریسپانسیو شدنش هم media query برایش بنویسید که در سایزهای مختلف مکانش مشخص باشه.
موفق باشید


علیرضا کفایتی
تخصص : برنامه نویس laravel, vue.js
@alirezakefayati 3 سال پیش آپدیت شد
1

@aliasgharkashani1379
سلام
اولا ما تا کدتون رو نبینیم نمیتونیم نظری بدیم .
پس بهتره کد قالب این صفحه رو بگذارید . + css
دوما پیشنهاد میکنم فلکس باکس را در css یاد بگیرید . کار رو خیلی ساده کرده


علیرضا مه آبادی
تخصص : در حال یادگیری لاراول
@aliasgharkashani1379 3 سال پیش مطرح شد
0

@gomnam

سلام
بله کدهارو قرار دادم. و به صورت خط و ستون توی بوت استرپ نوشتم ولی قسمت باکس کوچک به محظ اضافه شدن باکس سوال بزرگتر پایین میاد و روبروی اخرین باکس سوال قرار میگیرد.درحالی که میخواهم همون بالا بماند با حفظ رسپانسیو


محمد حکمتی
تخصص : مثلا backend
@mohammad.hekmaty 3 سال پیش مطرح شد
0

باید صفحه رو از نظر طولی تقسیم کنید.یعنی دو تا Div اصلی بزارید یکی برای باکس سیاه یکی برای باکس های سفید مثلا طول باکس های سفید 75 درصد صفحه باشه طول باکس سیاه 25 درصد و parent این دوتا فلکس دایرکشن ردیفی (row) بگیره.


علیرضا مه آبادی
تخصص : در حال یادگیری لاراول
@aliasgharkashani1379 3 سال پیش آپدیت شد
0

@mohammad.hekmaty

از طریق بوت استرپ نمیشه کاری کرد؟ چون رسپانسیوش بر اساس ستون های بوت استرپه و اینجوری که شما فرمودید درست میشه ولی در صفحه موبایل بهم میریزه


محمد حکمتی
تخصص : مثلا backend
@mohammad.hekmaty 3 سال پیش مطرح شد
1

@aliasgharkashani1379
میشه خیلی هم راحت تره
مثال:

<div class="d-flex flex-row">
    <div class="w-75"> </div>
    <div class="w-25"> </div>
</div>

این مثاله خودتون با توجه به کد خودتون اینا رو جایگزاری کنید.


Banana Life
@shift.delete 3 سال پیش آپدیت شد
0

سلام
شما باکس تیره را position: absolute قرار بدید و مکانش رو از left- چپ و top-بالا مشخص کنید و برای ریسپانسیو شدنش هم media query برایش بنویسید که در سایزهای مختلف مکانش مشخص باشه.
موفق باشید


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

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