Изготовление Bootstrap карты относительно маленькой во всех отношениях - PullRequest
0 голосов
/ 24 апреля 2020

Мои требования

  1. Мне нужно сделать карту bootstrap небольшого размера, чтобы она точно соответствовала моей странице.
  2. удалить большую часть отступов, полей вокруг карточки, текста, значка ... То есть, он должен быть как можно меньшим, чтобы помещать 8 (одинакового размера) таких карточек в ряд, чтобы все параметры точно помещались в просмотр одной страницы вместе с двумя диаграммами, показанными выше, как показано на скриншоте ниже. dashboard

Приведенный ниже код в Bootstrap дает мне карту, как показано на этом рисунке. Я пытаюсь сделать ту же карту, своего рода копию карты, но небольшого размера.

bootstrap_card

<div class=" col-lg-3 col-md-6">
      <div class=" card card-stats">
        <div class=" card-body">
          <div class=" row">
            <div class=" col-5">
              <div class=" info-icon text-center icon-primary">
                <i class=" icons icon-shape-star"> </i>
              </div>
            </div>
            <div class=" col-7">
              <div class=" numbers">
                <p class=" card-category">Followers</p>
                <h3 class=" card-title">+45k</h3>
              </div>
            </div>
          </div>
        </div>
        <div class=" card-footer">
          <hr />

          <div class=" stats">
            <i class=" icons icon-sound-wave"> </i> Last Research
          </div>
        </div>
      </div>
    </div>

То, что я пытался Я пытался изменить элемент bootstrap * CSS col number (col-1, col-5 ..), удалите отступы для элемента CSS card,card-body, ... , info-icon, чтобы сделать иконку относительно маленькой, но это не дает мне его реплики с текстом, иконкой. Это всегда заканчивалось испорченной картой.

Пожалуйста, помогите мне. Моя конечная цель - сделать ее меньше и включить в карту дополнительные данные (4 параметра), которые должны выглядеть примерно так: required_bootstrap_card

То есть

  1. значок в левом верхнем углу
  2. Первые данные в правом верхнем углу
  3. Вторые данные над нижним колонтитулом карты под значком
  4. Третий правый угол третьих данных, выровненный по правому краю со вторыми данными № 3, упомянутыми выше
  5. Четвертые данные в нижнем колонтитуле.

Также, если у вас есть какие-либо другие полезные идеи по включению данных 4 параметров в одну карту, поделитесь ими со мной. Это я делаю, чтобы соответствовать всем параметрам в пределах одного просмотра страницы.

1 Ответ

1 голос
/ 24 апреля 2020

используйте col класс вместо col-lg-3 col-md-6. Таким образом, вы можете установить 8 столбцов в одной строке.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row">
  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h3 class=" card-title">+45k</h3>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h3 class=" card-title">+45k</h3>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h3 class=" card-title">+45k</h3>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h3 class=" card-title">+45k</h3>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h3 class=" card-title">+45k</h3>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h3 class=" card-title">+45k</h3>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h3 class=" card-title">+45k</h3>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h3 class=" card-title">+45k</h3>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>
...