मैं बूटस्ट्रैप कार्ड को मोबाइल दृश्य में प्रदर्शित करने का प्रयास कर रहा हूं जैसा कि यह डेस्कटॉप संस्करण में दिखता है। मैं इसे Google पर खोजने का प्रयास करता हूं लेकिन कोई सहायता परिणाम नहीं मिला। कोई टुकड़ा नहीं! जैसा कि आप नीचे की छवि में बूटस्ट्रैप v4 कार्ड के रूप में देख सकते हैं।

डेस्कटॉप दृश्य

here

वर्तमान मोबाइल दृश्य

mobile

मुझे क्या चाहिए:

मैं कार्ड को मोबाइल दृश्य में देखने का तरीका ढूंढ रहा हूं जैसा कि यह डेस्कटॉप दृश्य में दिखता है।

फ़ोटोशॉप के साथ उदाहरण:

shop

/**Product item styling **/
.ratings i {
    font-size: 16px;
    color: red
}

.strike-text {
    color: red;
    text-decoration: line-through
}

.product-image {
    width: 100%
}

.dot {
    height: 7px;
    width: 7px;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 3px;
    background-color: blue;
    border-radius: 50%;
    display: inline-block
}

.spec-1 {
    color: #938787;
    font-size: 15px
}

h5 {
    font-weight: 400
}

.para {
    font-size: 16px
}

.txt-wrp-on-btn
{
    overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-4 col-sm-4">  
    <div class="row p-2 bg-white border rounded mt-2 mb-2" style="min-height: 130px;">
      <div class="col-md-4 mt-1">
             <img class="img-fluid img-responsive rounded product-image" src="https://i.ibb.co/VL3w7MC/WJXt0n8-Oimy34fxuz-Ihw.jpg">
      </div>
       <div class="col-md-5 mt-1">
         <span class="text-primary " data-toggle="tooltip" data-placement="top" title="6 Pc Meal">
                    <strong>6 Pc Meal</strong>
         </span>

                  <!-- PRICE SECTION -->

                  <!-- IF SERVINGS IS MENU -->
                    <div class="d-flex flex-row align-items-center">
                        <h4 class="mr-1 text-success h6">$20.68</h4>
                        <small class="strike-text mb-2">$22.76</small>
                      </div>
                 <!-- IF SERVINGS IS PLATE -->
                  <p class="text-justify text-truncate para mb-0">
                     3 Thighs and 2 Drums along with Large box of Taters                         </p>

            </div>
               <div class="align-items-center align-content-center col-md-3 border-left mt-1">


                 <!-- DETAIL ICON -->
                 <div class="d-flex flex-column mt-1">
                  <a href="javascript:void(0)" onclick="showModalWithHeader('https://domain/modal/showup/restaurant/menu/20', '6 Pc Meal')" class="btn btn-primary btn-sm txt-wrp-on-btn">
                    <i class="fas fa-info-circle" ></i> 
                  </a>

                  <!-- FAVOURITE ICON -->
                                    <a href="#" class="far fa-heart btn btn-outline-danger btn-sm mt-2 txt-wrp-on-btn" onclick="confirm_modal('https://domain/favourite/update/20')"></a>

                  <!-- ADD TO CART -->
                      <div class="closed-now">

                     <a href="javascript:void(0)" class=" btn btn-outline-success btn-sm mt-2 btn-block txt-wrp-on-btn" onclick="showCartModal('https://domain/modal/showup/restaurant/cart/20', 'Add to cart')"> <span class="fas fa-shopping-cart"></span></a>

                  

                 </div>
                 
              </div>
            </div>
          </div>
        </div>
4
codelone 5 फरवरी 2021, 14:55

2 जवाब

सबसे बढ़िया उत्तर

क्या आप कृपया नीचे दिए गए कोड लिंक की जांच कर सकते हैं? आशा है कि यह आपके काम आएगा। हमने बूटस्ट्रैप कॉलम क्लासेस को बदल दिया है। यदि आप डेस्कटॉप के समान दृश्य चाहते हैं तो आप सीधे बूटस्ट्रैप कॉलम वर्ग col-* जोड़ सकते हैं।

उदाहरण के लिए: col-md-4 से col-4 तक।

कृपया इस लिंक का संदर्भ लें: https://jsfiddle.net/yudizsolutions/y15m3nhj/1/

/**Product item styling **/
.ratings i {
    font-size: 16px;
    color: red
}

.strike-text {
    color: red;
    text-decoration: line-through
}

.product-image {
    width: 100%
}

.dot {
    height: 7px;
    width: 7px;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 3px;
    background-color: blue;
    border-radius: 50%;
    display: inline-block
}

.spec-1 {
    color: #938787;
    font-size: 15px
}

h5 {
    font-weight: 400
}

.para {
    font-size: 16px
}

.txt-wrp-on-btn
{
    overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-4">
  <div class="row p-2 bg-white border rounded mt-2 mb-2" style="min-height: 130px;">
    <div class="col-4 mt-1">
      <img class="img-fluid img-responsive rounded product-image" src="https://i.ibb.co/VL3w7MC/WJXt0n8-Oimy34fxuz-Ihw.jpg">
    </div>
    <div class="col-5 mt-1">
      <span class="text-primary " data-toggle="tooltip" data-placement="top" title="6 Pc Meal">
        <strong>6 Pc Meal</strong>
      </span>

      <!-- PRICE SECTION -->

      <!-- IF SERVINGS IS MENU -->
      <div class="d-flex flex-wrap flex-row align-items-center">
        <h4 class="mr-1 text-success h6">$20.68</h4>
        <small class="strike-text mb-2">$22.76</small>
      </div>
      <!-- IF SERVINGS IS PLATE -->
      <p class="text-justify text-truncate para mb-0">
        3 Thighs and 2 Drums along with Large box of Taters </p>

    </div>
    <div class="col-3 align-items-center align-content-center border-left mt-1">


      <!-- DETAIL ICON -->
      <div class="d-flex flex-column mt-1">
        <a href="javascript:void(0)" onclick="showModalWithHeader('https://domain/modal/showup/restaurant/menu/20', '6 Pc Meal')" class="btn btn-primary btn-sm txt-wrp-on-btn">
          <i class="fas fa-info-circle"></i>
        </a>

        <!-- FAVOURITE ICON -->
        <a href="#" class="far fa-heart btn btn-outline-danger btn-sm mt-2 txt-wrp-on-btn" onclick="confirm_modal('https://domain/favourite/update/20')"></a>

        <!-- ADD TO CART -->
        <div class="closed-now">

          <a href="javascript:void(0)" class=" btn btn-outline-success btn-sm mt-2 btn-block txt-wrp-on-btn" onclick="showCartModal('https://domain/modal/showup/restaurant/cart/20', 'Add to cart')"> <span class="fas fa-shopping-cart"></span></a>



        </div>

      </div>
    </div>
  </div>
</div>
1
Yudiz Solutions 5 फरवरी 2021, 15:22

आप मोबाइल विशिष्ट डिज़ाइन के लिए कुछ col-sm-* कक्षाओं का उपयोग कर सकते हैं। जहां भी कोड को उपसर्ग EDIT: के साथ संपादित किया गया था, वहां मैंने टिप्पणियां जोड़ दी हैं

/**Product item styling **/

.ratings i {
  font-size: 16px;
  color: red
}

.strike-text {
  color: red;
  text-decoration: line-through
}

.product-image {
  width: 100%
}

.dot {
  height: 7px;
  width: 7px;
  margin-left: 6px;
  margin-right: 6px;
  margin-top: 3px;
  background-color: blue;
  border-radius: 50%;
  display: inline-block
}

.spec-1 {
  color: #938787;
  font-size: 15px
}

h5 {
  font-weight: 400
}

.para {
  font-size: 16px
}

.txt-wrp-on-btn {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-4 col-sm-12"> <!-- EDIT: 12 columns on smaller screen -->
  <div class="row p-2 bg-white border rounded mt-2 mb-2" style="min-height: 130px;">
    <div class="col-md-4 mt-1 col-sm-4"> <!-- EDIT: Subdivide 12 columns into 4 for the image -->
      <img class="img-fluid img-responsive rounded product-image" src="https://i.ibb.co/VL3w7MC/WJXt0n8-Oimy34fxuz-Ihw.jpg">
    </div>
    <div class="col-md-5 mt-1 col-sm-6"> <!-- EDIT: Create 6 columns for the center part -->
      <span class="text-primary " data-toggle="tooltip" data-placement="top" title="6 Pc Meal">
                    <strong>6 Pc Meal</strong>
         </span>

      <!-- PRICE SECTION -->

      <!-- IF SERVINGS IS MENU -->
      <div class="d-flex flex-row align-items-center">
        <h4 class="mr-1 text-success h6">$20.68</h4>
        <small class="strike-text mb-2">$22.76</small>
      </div>
      <!-- IF SERVINGS IS PLATE -->
      <p class="text-justify text-truncate para mb-0">
        3 Thighs and 2 Drums along with Large box of Taters </p>

    </div>
    <div class="align-items-center align-content-center col-md-3 border-left mt-1 col-sm-2"> <!-- EDIT: Remaining two columns for the last part -->


      <!-- DETAIL ICON -->
      <div class="d-flex flex-column mt-1">
        <a href="javascript:void(0)" onclick="showModalWithHeader('https://domain/modal/showup/restaurant/menu/20', '6 Pc Meal')" class="btn btn-primary btn-sm txt-wrp-on-btn">
          <i class="fas fa-info-circle"></i>
        </a>

        <!-- FAVOURITE ICON -->
        <a href="#" class="far fa-heart btn btn-outline-danger btn-sm mt-2 txt-wrp-on-btn" onclick="confirm_modal('https://domain/favourite/update/20')"></a>

        <!-- ADD TO CART -->
        <div class="closed-now">

          <a href="javascript:void(0)" class=" btn btn-outline-success btn-sm mt-2 btn-block txt-wrp-on-btn" onclick="showCartModal('https://domain/modal/showup/restaurant/cart/20', 'Add to cart')"> <span class="fas fa-shopping-cart"></span></a>



        </div>

      </div>
    </div>
  </div>
</div>
1
m4n0 5 फरवरी 2021, 15:16