Попытка создать систему показателей, где весь контент помещается в поле, которое я создал с помощью Bootstrap 4 - PullRequest
Новая
       4

Попытка создать систему показателей, где весь контент помещается в поле, которое я создал с помощью Bootstrap 4

0 голосов
/ 03 февраля 2020 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="ScoreCard">
                    <div style="top: 0px; position: absolute;">
                        <h3 style="background-color:lightgray"> Additional Handling</h3>
                    </div>
                    <div style="font-weight:bold">
                        <h1>$100,000.00</h1>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <p>This is 50% more than last month</p>
               <i class="fa fa-thumbs-o-up" style="font-size:24px;"></i>
            </div>
        </div>
    </div>
</div>

Я пытаюсь создать систему показателей, похожую на эту: enter image description here

Однако тот, который я создал, выглядит так, где мой текст и значок находятся за пределами поля, которое я создал. Кроме того, я пытаюсь добавить фон к моему заголовку, но он охватывает только текст, и я хотел бы охватить весь раздел заголовка, как на моем первом изображении.

enter image description here

Ниже приведен код. Моей первоначальной мыслью было создание контейнера внутри другого контейнера, чтобы добиться этого, но способ, которым я его использую, явно не работает. Может кто-нибудь помочь? Я также хотел бы, чтобы раздел моего заголовка имел фон. То, как я это делаю, дает моему тексту только фон. 

<div class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="ScoreCard">
                    <div style="top: 0px; position: absolute;">
                        <h3 style="background-color:lightgray"> Additional Handling</h3>
                    </div>
                    <div style="font-weight:bold">
                        <h1>$100,000.00</h1>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <p>This is 50% more than last month</p>
               <i class="fa fa-thumbs-o-up" style="font-size:24px;"></i>
            </div>
        </div>
    </div>
</div>
...