Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.4k views
in Technique[技术] by (71.8m points)

Bootstrap Card size different on mobile and desktop

I have the Bootstrap Cards (bootstrap4) on my desktop like this:

Desktop

My mobile view is like this:

Mobile

My html code is:

    <div class="card-deck">
    <div class="center card" style="width: 100%;">
        <a href="{{ path('qrcodemanual') }}"><img id="qrcheck" class="card-img-top" src="{{ asset('images/mobile_qr_code.png') }}"  alt="QR-Code"></a>
        <div class="card-body">
            <h5 class="card-title">{{ '/'|trans }}
                {% if qrcodeEnrollStatus == 1 %}
                    <span class="badge badge-success float-right">{{ '/'|trans }} </span>
                {% else %}
                    <span class="badge badge-secondary float-right">{{ '/'|trans }} </span>
                {% endif %}
            </h5>
            <p class="card-text">{{ 'userhome.qrcode.text'|trans }}</p>
            <a href="{{ path('qrcodemanual')}}" class="btn btn-primary">{{ '/'|trans }}</a>
        </div>
    </div>

    <div class="center card" style="width: 100%;">
        <img class="card-img-top" src="{{ asset('images/OTP.png') }}" alt="OTP">
        <div class="card-body">
            <h5 class="card-title">{{ '/'|trans }}
                {% if smsEnrollStatus != null %}
                    <span class="badge badge-success float-right">{{ '/'|trans }} </span>
                {% else %}
                    <span class="badge badge-secondary float-right">{{ '/'|trans }} </span>
                {% endif %}
            </h5>
            <p class="card-text">{{ '/'|trans }}</p>
            <a href="{{ path('smsmanual')}}" class="btn btn-primary">{{ '/'|trans }}</a>
        </div>
    </div>
</div>

<br>
<h5>Other options:</h5>
<br>

<div class="card-deck">
    <div class="center card" style="width: 100%;">
        <img class="card-img-top" src="{{ asset('images/OTP.png') }}" alt="OTP">
        <div class="card-body">
            <h5 class="card-title">{{ '/'|trans }}
                {% if emergencyEnrollStatus == 1 %}
                    <span class="badge badge-success float-right">{{ '/' |trans }} </span>
                {% else %}
                    <span class="badge badge-secondary float-right">{{ '/' |trans }} </span>
                {% endif %}
            </h5>
            <p class="card-text">{{ '/'|trans }}</p>
            <a href="{{ path('emergencypasswordmanual')}}" class="btn btn-primary">{{ '/'|trans }}</a>
        </div>
    </div>

    <div class="center card" style="width: 100%;">
        <img class="card-img-top" src="{{ asset('images/OTP.png') }}" alt="OTP">
        <div class="card-body">
            <h5 class="card-title">{{ '/'|trans }}</h5>
            <p class="card-text">{{ '/'|trans }}</p><br>
            <a href="/" class="btn btn-primary">{{ '/'|trans }}</a>
        </div>
    </div>
</div>

I want the cards in desktop view smaller. How can I do this while keeping my mobile view like it is?

Now when i change the width, the mobile view is also affected.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

you can use @media to control some CSS for desktop display only like this:

  <style>
      @media  only screen and (min-width : 768px) {
          .card {
            display: block !important;
            width: 25rem !important;
            flex:none !important;
          }
      }
  </style>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...