Как сделать материал карты согласованного размера - PullRequest
Новая
       7

Как сделать материал карты согласованного размера

0 голосов
/ 06 июля 2019

Я пытаюсь сделать так, чтобы при добавлении третьей карты Материала она была такого же размера, как и первые две в отдельности.В настоящее время третья карта больше, но я бы хотел уменьшить ее вдвое (в соответствии с предыдущими двумя картами в отдельности).Кроме того, есть ли способ сделать так, чтобы текст (как показано на первой карточке) не сходил с карточки?Мне нужно сохранить .card-content{ white-space: nowrap;}, чтобы некоторые интервалы были правильными и чтобы текст не разбивался, когда экран свернут.

HTML: 

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

<head>
  <title>SB Admin 2 - Tables</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <link href="css/sb-admin-2.min.css" rel="stylesheet">
    <link href="css/couponsexample.css" rel="stylesheet">
</head>
  <body>
  <section
  <div class="container">
     <div class="row">
      <div class="col s12 m6">
        <div class="card">
         <div class="card-content">
           <div class="dropdown no-arrow right">
          <a class="dropdown-toggle right" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
 </a>
</div>
 <span class="card-title blue-text text-darken-2">TestestTestestTestestTestestTestestTestestTestestTestestTestestTestestTestestTestestTestestTestest
  </span>
   <span class="card-title blue-text text-darken-2">5 dollar amount</span>

  </div>                                                                  
      </div>
       </div>
         <div class="col s12 m6">
            <div class="card">
              <div class="card-content">

       <span class="card-title blue-text text-darken-2">Test2 Test2
          </span>
         <span class="card-title blue-text text-darken-2">Test2Test2</span>
              </div>
            </div>
              </div>
<div class="col s12 m6">
  <div class="card">
   <div class="card-content">
     <span class="card-title blue-text text-darken-2">Test3 Test3
      </span>
        <span class="card-title blue-text text-darken-2">Test3</span>
          </div>
             </div>
                </div>
                  </div>
                     </div>
        </section>
</body>
</html>

CSS: 

/* Coupon Code */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.card .card-title.hidden {
  text-indent: -9999px;
}
.card .card-badge {
  position:relative;
  top: 0px;
  width: 100%;
  text-align: left;
  text-transform: uppercase;
  font-size: 0.9em;
  padding: 0.2em 24px 0.8em 24px;
  color: #fff;

}
.card .card-badge .material-icons {
  position: relative;
  margin-right: 8px;
  top: 7px;
}
.card .card-badge + .card-title {
  padding-bottom: 66px;
}
.card.horizontal .card-badge {
  text-align: center;
  padding: 0.2em 0;
}
.card.horizontal .card-badge .material-icons {
  display: none;
}

.card-action {
  white-space: nowrap;
}

.card-content{
    white-space: nowrap;

}
...