الزر محاذاة إلى اليسار في بطاقة Bootstrap

0

أقوم بعمل بعض عناصر الشبكة في Bootstrap 3. على الصورة بالطائرة ، أحاول محاذاة الزر في نفس موضع الصورة مع الأسد ، ولكن فقط عندما يكون إطار العرض أدناه < 768px .

انظر هنا .

عندما يكون إطار العرض > 768px أضع الزر مع الفئة التالية:

.bottom-right {
   position: absolute;
   bottom: 8px;
   right: 16px;
}

كيف يمكنني تغيير موضع الزر دون التأثير على أي أزرار أخرى على الشبكة؟ هناك العديد من الأزرار التي تستخدم الفصل bottom-right

هكذا يجب أن تبدو النتيجة النهائية:

Imagen 57

لقد قطعت أكبر قدر ممكن من التعليمات البرمجية ليس هناك صلة بالسؤال

body {
      background-color: #f5f5f5;
    }
    .index-content a:hover {
      color: black;
      text-decoration: none;
    }
    .index-content .row {
      margin-top: 20px;
    }
    .index-content a {
      color: black;
    }
    .index-content .card {
      background-color: #FFFFFF;
      padding: 0;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    }
    .index-content .card:hover {
      box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
      color: black;
    }
    .index-content .card img {
      width: 100%;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      height: 400px;
    }
    .index-content .card h4 {
      margin: 20px;
    }
    .index-content .card p {
      margin: 20px;
      opacity: 0.65;
    }
    /* Set width between grid elements */
    .small-padding.top {
       padding-top:10px;
    }

    .small-padding.bottom {
        padding-bottom:10px;
    } 
    .small-padding.left {
        padding-left:5px;
    }

    .small-padding.right {
        padding-right:5px;
    }
    .margin_bottom {
      margin-bottom: 10px;
    }
    .row [class*="col-"] {
      padding-right: 5px;
      padding-left: 5px;
    }
    .row {
      margin-left: -5px;
      margin-right: -5px;
    }
    .img-responsive { 
        height: 100%;
    }
    /* Position of buttons in a single grid element */
    .inner-wrapper {
      text-align: center;
      background: none;
    }
    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .bottom-right {
        position: absolute;
        bottom: 8px;
        right: 16px;
    }

    .bottom-left {
        position: absolute;
        bottom: 8px;
        left: 16px;
    }
    .header-textbox-bottom-left {
      position: absolute;
        bottom: 8px;
        left: 16px;
    }   
    .card-content {
      display: flex;
      padding: 30px 0px;
      justify-content: space-between;
      align-items: flex-end;
    }
    
    .card-content__info {
      display: flex;
      flex-direction: column;
      left: 3em;
      position: relative;
      /* text-transform: uppercase; */
    }
    
    .card-content__info > h4 {
      padding: 0 !important;
      margin: 5px 0 !important;
    }
    /* Set full width on columns */
    @media (max-width: 768px) {
        .img-responsive {
        width: 100%;
        }
        .index-content .card img {
        height: 100%
      }

       .card-content__info {
           flex-direction: column;
           left: 0;
        }

      .card-content {
          flex-direction: column;
          left: 20px;
          position: relative;
          align-items: inherit;
      }
      /* Position button on banner with textbox */
      .header-textbox-bottom-left {
        position: static;
        bottom: 8px;
        left: 16px;
        text-align: left;
        padding-left: 20px;
        padding-bottom: 5px;
      }    
    }

    @media (max-width: 991px) {
      h3 {
        font-size: 1.2em;

      }
    }

    /* GRID ELEMENTS MEDIA QUERIES */
    @media (min-width: 768px) {
      .card {
        position: relative;
      }
      .card-content {
        position: absolute;
        bottom: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
      }
      .card-content h4,
      .card-content p,
      .card-content span {
        color: white;
        width: 100%;
        float: left;
        margin: 0 0 5px;
      }
      .card-content a {
        float: right;
      }
      .index-content .card h4,
      .index-content .card p {
        padding: 15px 20px;
        margin: 0;
      }
      .index-content .card p {
        padding: 0 20px 15px;
        margin: 0;
      }
      .card-content-textbox {
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(255, 255, 255, 0.7);
        /*right: 0;*//* top position on right*/
        margin: 15px;
        max-width: 300px;
        height: 91%
      }
    }
<div class="row">
      <a href="#">
        <div class="col-sm-12 small-padding top bottom">
            <div class="index-content">
                <div class="card">
                    <img src="https://www.sardiustours.com/wp-content/uploads/2016/09/lion-1118467_1920-Copy.jpg"></img>
                    <div class="card-content-textbox flexbox-column">
                        <h4>BMW & HEADLINE 2018</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <div class="inner-wrapper header-textbox-bottom-left">
                          <button class="btn btn-success">Read More</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </a>
    </div>
    <div class="row">
        <div class="col-sm-12 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="https://s-media-cache-ak0.pinimg.com/originals/87/bf/cf/87bfcfb36780c0fec472d8d301be7a1c.jpg"></img>
                    <div class="card-content">
                        <div class="card-content__info">
                          <h4>HIGH SERVICELEVEL AND QUALITY</h4>
                        <span>Book a meeting and let's find a solution</span>  
                        </div>         
                        <button type="button" class="btn btn-success bottom-right">Read more</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

2 الاجابة

1
افضل جواب

أضف فئة أخرى إلى علامة الزر ، على سبيل المثال btn-custom

<button type="button" class="btn btn-success bottom-right btn-custom">Read more</button>

أضف ما يلي داخل @media (max-width: 768px) منع

.btn-custom {
    position: static;
    width: fit-content;
    margin-top: 15px;
}

:مؤلف
1
افضل جواب

أضف فئة أخرى إلى علامة الزر الخاصة بك مثل ذلك

class="btn btn-success  bottom-right bottom-right-flex"

في css الخاص بك للقسمmedia (الحد الأقصى للعرض: 768 بكسل)

أضف الإدخال التالي

.bottom-right.bottom-right-flex {
  position: absolute;
  bottom: 8px;
  left: 16px;
 }

هذا يخبره أن ينطبق فقط على العنصر إذا كان كل من الفصول السفلية اليمنى واليسرى السفلية الموجودة على نفس العنصر. سيساعدك هذا على تحديد هذا العنصر المحدد في إطار العرض هذا دون التأثير على العناصر الأخرى الخاصة بك مع الحفاظ في الوقت نفسه على CSS الحالي في أسفل اليمين فقط عندما يكون إطار العرض أكبر.

:مؤلف
فوق
قائمة طعام