Попытка сопоставить высоту загрузочной карты на настольном компьютере - PullRequest
Новая
       3

Попытка сопоставить высоту загрузочной карты на настольном компьютере

1 голос
/ 31 октября 2019

Я искал решение, и ничего, что я нашел на каких-либо сайтах, не помогало мне. Я хочу, чтобы высота карты совпадала на большом экране и помещалась под маленькими экранами. В настоящее время все это работает, за исключением того, что карты не соответствуют высотам, и выглядит ужасно. Я также мог бы воспользоваться рекомендацией о том, как изменить высоту, чтобы сделать их больше без пустого места на карте 

              <div class="card-group row d-flex ">
               <div class="col-lg-4 col-sm-12">
                <div class="card bg-dark text-white" >
             <img class="card-img img-fluid" 
          src="../website/image/lightbulb.jpg" alt="Card image">
             <div class="card-img-overlay">
               <h5 class="card-title"></h5>
               <p class="card-text"></p>
               <button class=' btn-primary'></button>
              </div>
             </div>
              </div>
                <div class="col-lg-4 col-sm-12">
              <div class="card bg-dark text-white" >
                <img class="card-img img-fluid" 
          src="../website/image/stress1.jpg" alt="Card image">
                <div class="card-img-overlay">
                  <h5 class="card-title"></h5>
                  <p class="card-text"></p>
                  <button class=' btn-primary'></button>
                </div>
               </div>
              </div>
                <div class="col-lg-4 col-sm-12">
              <div class="card bg-dark text-white" >
                <img class="card-img img-fluid" 
          src="../website/image/blackhole.jpg" alt="Card image">
                <div class="card-img-overlay">
                  <h5 class="card-title"></h5>
                  <p class="card-text"></p>
                  <button class=' btn-primary'></button>
                </div>
               </div>
              </div>
             </div>
           </div>
       </div>

Желание карт соответствовать высоте независимо от фотографии, и я хочу иметь возможность увеличивать все карты без переполнения

Ответы [ 2 ]

1 голос
/ 31 октября 2019

Вы можете использовать этот код 

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Demo</title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }
    
    html {
      font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
      font-size: 14px;
    }
    
    h5 {
      font-size: 1.28571429em;
      font-weight: 700;
      line-height: 1.2857em;
      margin: 0;
    }
    
    .card {
      font-size: 1em;
      overflow: hidden;
      padding: 0;
      border: none;
      border-radius: .28571429rem;
      box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
    }
    
    .card-block {
      font-size: 1em;
      position: relative;
      margin: 0;
      padding: 1em;
      border: none;
      border-top: 1px solid rgba(34, 36, 38, .1);
      box-shadow: none;
    }
    
    .card-img-top {
      display: block;
      width: 100%;
      height: auto;
    }
    
    .card-title {
      font-size: 1.28571429em;
      font-weight: 700;
      line-height: 1.2857em;
    }
    
    .card-text {
      clear: both;
      margin-top: .5em;
      color: rgba(0, 0, 0, .68);
    }
    
    .card-footer {
      font-size: 1em;
      position: static;
      top: 0;
      left: 0;
      max-width: 100%;
      padding: .75em 1em;
      color: rgba(0, 0, 0, .4);
      border-top: 1px solid rgba(0, 0, 0, .05) !important;
      background: #fff;
    }
    
    .card-inverse .btn {
      border: 1px solid rgba(0, 0, 0, .05);
    }
    
    .profile {
      position: absolute;
      top: -12px;
      display: inline-block;
      overflow: hidden;
      box-sizing: border-box;
      width: 25px;
      height: 25px;
      margin: 0;
      border: 1px solid #fff;
      border-radius: 50%;
    }
    
    .profile-avatar {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    
    .profile-inline {
      position: relative;
      top: 0;
      display: inline-block;
    }
    
    .profile-inline~.card-title {
      display: inline-block;
      margin-left: 4px;
      vertical-align: top;
    }
    
    .text-bold {
      font-weight: 700;
    }
    
    .meta {
      font-size: 1em;
      color: rgba(0, 0, 0, .4);
    }
    
    .meta a {
      text-decoration: none;
      color: rgba(0, 0, 0, .4);
    }
    
    .meta a:hover {
      color: rgba(0, 0, 0, .87);
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
        <div class="card">
          <img class="card-img-top" src="https://picsum.photos/200/150/?random">
          <div class="card-block">
            <h5 class="text-bold">Tawshif Ahsan Khan</h5>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
        <div class="card">
          <img class="card-img-top" src="https://picsum.photos/200/150/?random
    ">
          <div class="card-block">
            <h4 class="card-title">Tawshif Ahsan Khan</h4>
            <div class="meta">
              <a href="#">Friends</a>
            </div>
            <div class="card-text">
              Tawshif is a web designer living in Bangladesh.
            </div>
          </div>
          <div class="card-footer">
            <span class="float-right">Joined in 2013</span>
            <span><i class=""></i>75 Friends</span>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
        <div class="card">
          <img class="card-img-top" src="https://picsum.photos/200/150/?random
    ">
          <p class="card-block">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam velit quisquam veniam excepturi temporibus inventore corporis dicta sit culpa veritatis placeat earum, dolorum asperiores, delectus dolore voluptatibus, at magnam nobis!
          </p>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
        <div class="card">
          <img class="card-img-top" src="https://picsum.photos/200/150/?random
    ">
          <div class="card-block">
            <figure class="profile">
              <img src="https://picsum.photos/200/150/?random" class="profile-avatar" alt="">
            </figure>
            <h4 class="card-title mt-3">Tawshif Ahsan Khan</h4>
            <div class="meta">
              <a>Friends</a>
            </div>
            <div class="card-text">
              Tawshif is a web designer living in Bangladesh.
            </div>
          </div>
          <div class="card-footer">
            <small>Last updated 3 mins ago</small>
            <button class="btn btn-secondary float-right btn-sm">show</button>
          </div>
        </div>
      </div>
    </div>
    <div class="row mb-5">
      <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
        <div class="card card-inverse card-primary ">
          <img class="card-img-top" src="https://picsum.photos/200/150/?random">
          <blockquote class="card-blockquote p-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
            <footer>
              <small>
                              Someone famous in <cite title="Source Title">Source Title</cite>
                            </small>
            </footer>
          </blockquote>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
        <div class="card card-inverse card-info">
          <img class="card-img-top" src="https://picsum.photos/200/150/?random">
          <div class="card-block">
            <figure class="profile">
              <img src="https://picsum.photos/200/150/?random" class="profile-avatar" alt="">
            </figure>
            <h4 class="card-title mt-3">Tawshif Ahsan Khan</h4>
            <div class="meta card-text">
              <a>Friends</a>
            </div>
            <div class="card-text">
              Tawshif is a web designer living in Bangladesh.
            </div>
          </div>
          <div class="card-footer">
            <small>Last updated 3 mins ago</small>
            <button class="btn btn-info float-right btn-sm">Follow</button>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
        <div class="card card-inverse card-info">
          <img class="card-img-top" src="https://picsum.photos/200/150/?random">
          <div class="card-block">
            <figure class="profile profile-inline">
              <img src="https://picsum.photos/200/150/?random" class="profile-avatar" alt="">
            </figure>
            <h4 class="card-title">Tawshif Ahsan Khan</h4>
            <div class="card-text">
              Tawshif is a web designer living in Bangladesh.
            </div>
          </div>
          <div class="card-footer">
            <small>Last updated 3 mins ago</small>
            <button class="btn btn-info float-right btn-sm">Follow</button>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
        <div class="card card-inverse card-info">
          <img class="card-img-top" src="https://picsum.photos/200/150/?random">
          <div class="card-block">
            <figure class="profile profile-inline">
              <img src="https://picsum.photos/200/150/?random" class="profile-avatar" alt="">
            </figure>
            <h4 class="card-title">Tawshif Ahsan Khan</h4>
            <div class="card-text">
              Tawshif is a web designer living in Bangladesh.
            </div>
          </div>
          <div class="card-footer">
            <button class="btn btn-info btn-sm">Follow</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>
0 голосов
/ 31 октября 2019

Изображение карты - просто бессмысленный фон с помощью тега card-img-overlay. В вашем случае я бы создал CSS-фон для каждой карты. Тогда высоты на рабочем столе верны. 

.card-background {
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-12 d-flex">
      <div class="card card-background" style="background-image: url(https://www.w3schools.com/bootstrap4/img_avatar1.png);">
        <div class="card-body">
          <h5 class="card-title">Nick</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          <button class='btn btn-primary'>Button</button>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-12 d-flex">
      <div class="card card-background" style="background-image: url(https://www.w3schools.com/bootstrap4/img_avatar4.png);">
        <div class="card-body">
          <h5 class="card-title">Peter</h5>
          <p class="card-text">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          </p>
          <button class='btn btn-primary'>Button</button>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-12 d-flex">
      <div class="card card-background" style="background-image: url(https://www.w3schools.com/bootstrap4/img_avatar6.png);">
        <div class="card-body">
          <h5 class="card-title">Michele</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          <button class='btn btn-primary'>Button</button>
        </div>
      </div>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...