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

Categories

javascript - Bootstrap 5 card overlapping in smaller screen

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

javascript - Bootstrap 5 card overlapping in smaller screen 

.footerlink a{
    color: inherit;
text-decoration: none;
}
.card{
    height:18rem;
}
.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }
.thumbcard{
width: 15rem;
height: 18rem;
}

@media(max-width: 768px){
.thumbcard{
width: 10rem;
height: 18rem;
}
}

a.custom-card,
a.custom-card:hover {
color: inherit;
text-decoration: none;
}
@media(max-width: 768px){
a.custom-card h5{
font-size: 1rem;
}
a.custom-card .card-body{
padding: 0.5rem 0.5rem;
font-size: 0.95rem;
line-height: none;
}
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.79.0">
    <title>Album example · Bootstrap v5.0</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/album/">

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style7.css">

    
  </head>
  <body>
    
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
        <div class="flex-row d-flex">
          <a class="navbar-brand" href="#" title="Brand">Brand</a>
        </div>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
                <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">                
                  </form>
          </div>
        </div>
      </nav>

<main>


  <div class="album py-5 bg-light">
    <!-- <h2>Latest Articles</h2> -->
    <div class="container">
        <h2>Recent Articles</h2>
      <div class="row row-cols-1 row-cols-sm-3 row-cols-md-4 g-3">
        <div class="col-6">
            <a href="#" class="custom-card">
          <div class="card shadow-sm thumbcard">
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

            <div class="card-body">
                <h5>This is demo header</h5>
              <p class="card-text">This is demo test. This is another demo text. This is demo text</p>              
            </div>
            <!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
          </div>
          </a>
        </div>  
        <div class="col-6">
            <a href="#" class="custom-card">
          <div class="card shadow-sm thumbcard">
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

            <div class="card-body">
                <h5>This is demo header</h5>
              <p class="card-text">This is demo test. This is another demo text. This is demo text</p>              
            </div>
            <!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
          </div>
          </a>
        </div> 
        <div class="col-6">
            <a href="#" class="custom-card">
          <div class="card shadow-sm thumbcard">
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

            <div class="card-body">
                <h5>This is demo header</h5>
              <p class="card-text">This is demo test. This is another demo text. This is demo text</p>              
            </div>
            <!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
          </div>
          </a>
        </div> 
        <div class="col-6">
            <a href="#" class="custom-card">
          <div class="card shadow-sm thumbcard">
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

            <div class="card-body">
                <h5>This is demo header</h5>
              <p class="card-text">This is demo test. This is another demo text. This is demo text</p>              
            </div>
            <!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
          </div>
          </a>
        </div> 
        <div class="col-6">
            <a href="#" class="custom-card">
          <div class="card shadow-sm thumbcard">
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

            <div class="card-body">
                <h5>This is demo header</h5>
              <p class="card-text">This is demo test. This is another demo text. This is demo text</p>              
            </div>
            <!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
          </div>
          </a>
        </div> 
        <div class="col-6">
            <a href="#" class="custom-card">
          <div class="card shadow-sm thumbcard">
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

            <div class="card-body">
                <h5>This is demo header</h5>
              <p class="card-text">This is demo test. This is another demo text. This is demo text</p>              
            </div>
            <!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
          </div>
          </a>
        </div> 
        <div class="col-6">
            <a href="#" class="custom-card">
          <div class="card shadow-sm thumbcard">
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

            <div class="card-body">
                <h5>This is demo header</h5>
              <p class="card-text">This is demo test. This is another demo text. This is demo text</p>              
            </div>
            <!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
          </div>
          </a>
        </div> 
        <div class="col-6">
            <a href="#" class="custom-card">
          <di

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

1 Reply

0 votes
by (71.8m points)

Simply add width: 100% with .thumbcard classes and with @media(max-width:768px){} classes.

Edited CSS classes

 .thumbcard{
width: 15rem;
width: 100%;
height: 18rem;
}

@media(max-width: 768px){
.thumbcard{
width: 10rem;
width: 100%;
height: 18rem;
}
}

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

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

56.9k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...