Несколько карт подряд не разделены, как ожидалось - PullRequest
Новая
       19

Несколько карт подряд не разделены, как ожидалось

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

Я экспериментировал с некоторыми примерами кода в документации и, в частности, выкладывал три карты подряд.

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

<div class="main-container">
  <div class="alert alert-app-level">
    ...
  </div>
  <header class="header header-6">
    <div class="branding">
      <a href="" class="nav-link">
        <img alt="" src="assets/logo2.png" height="60">
        <span class="title">Good day</span>
      </a>
    </div>

    <div class="header-actions"></div>

    <form class="search">
      <label for="search_input">
        <input id="search_input" type="text" placeholder="Search for keywords...">
      </label>
    </form>

    <div class="header-actions">
      <clr-dropdown>
        <button class="nav-text" clrDropdownTrigger aria-label="open user profile">
          john.doe@vmware.com
          <clr-icon shape="caret down"></clr-icon>
        </button>
        <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
          <a href="..." clrDropdownItem>Preferences</a>
          <a href="..." clrDropdownItem>Log out</a>
        </clr-dropdown-menu>
      </clr-dropdown>
    </div>
  </header>
  <div class="content-container">
    <div class="clr-row">
      <div class="clr-col-lg-4 clr-col-12">
        <div class="card">
          <div class="card-block">
            <h3 class="card-title">Card 1</h3>
            <p class="card-text">
              ...
            </p>
          </div>
          <div class="card-footer">
            <a href="..." class="btn btn-sm btn-link">Action 1</a>
          </div>
        </div>
      </div>
      <div class="clr-col-lg-4 clr-col-12">
        <div class="card">
          <div class="card-block">
            <h3 class="card-title">Card 2</h3>
            <p class="card-text">
              ...
            </p>
          </div>
          <div class="card-footer">
            <a href="..." class="btn btn-sm btn-link">Action 2</a>
          </div>
        </div>
      </div>
      <div class="clr-col-lg-4 clr-col-12">
        <div class="card">
          <div class="card-block">
            <h3 class="card-title">Card 3</h3>
            <p class="card-text">
              ...
            </p>
          </div>
          <div class="card-footer">
            <a href="..." class="btn btn-sm btn-link">Action 3</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

enter image description here

Нужно ли устанавливать Bootstrap, чтобы это работало?

TIA

1 Ответ

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

Вы почти у цели, вам не хватает одного важного элемента в структуре вашей страницы. Карты хороши, но вам нужно добавить <div class="content-area"> только внутри вашего <div class="content-container"> элемента. 

<div class="content-container">
    <div class="content-area"> <!-- THIS IS MISSING -->
        <div class="clr-row">
            <div class="clr-col-lg-4 clr-col-12">
                <div class="card">
                    <div class="card-block">
                        <h3 class="card-title">Card 1</h3>
                        <p class="card-text">
                            ...
                        </p>
                    </div>
                    <div class="card-footer">
                        <a href="..." class="btn btn-sm btn-link">Action 1</a>
                    </div>
                </div>
            </div>
            <div class="clr-col-lg-4 clr-col-12">
                <div class="card">
                    <div class="card-block">
                        <h3 class="card-title">Card 2</h3>
                        <p class="card-text">
                            ...
                        </p>
                    </div>
                    <div class="card-footer">
                        <a href="..." class="btn btn-sm btn-link">Action 2</a>
                    </div>
                </div>
            </div>
            <div class="clr-col-lg-4 clr-col-12">
                <div class="card">
                    <div class="card-block">
                        <h3 class="card-title">Card 3</h3>
                        <p class="card-text">
                            ...
                        </p>
                    </div>
                    <div class="card-footer">
                        <a href="..." class="btn btn-sm btn-link">Action 3</a>
                    </div>
                </div>
            </div>
        </div>
...