bulma - 如何在 Bulma 中制作横向卡片？

Question

我正在尝试在 bulma 中制作一张带有左侧图像的水平卡片。我希望卡片具有圆角边缘并具有与普通 bulma 卡片相同的响应属性。Bulma 目前不支持水平卡片，但我偶然发现了这个 github 问题，人们试图让它发挥作用。 https://github.com/jgthms/bulma/pull/1596

我确实尝试使用 css，但我无法创建工作水平卡片。这是我尝试的 HTML；

<div class="container is-fluid">
  <section class="section">
    <div class="container">
      <h1 class="title">Horizontal Card</h1>
    </div>
  </section>

  <div class="card is-horizontal is-half">
    <div class="card-image">
      <figure class="image is-4by3">
        <img src="https://picsum.photos/seed/picsum/256" alt="Placeholder image">
      </figure>
    </div>
    <div class="card-content">
      <div class="media">
        <div class="media-left">
          <figure class="image is-48x48">
            <img src="https://picsum.photos/seed/picsum/96" alt="Placeholder image">
          </figure>
        </div>
        <div class="media-content">
          <p class="title is-4">John Smith</p>
          <p class="subtitle is-6">@johnsmith</p>
        </div>
      </div>

      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Phasellus nec iaculis mauris. <a>@bulmaio</a>.
        <a href="#">#css</a> <a href="#">#responsive</a>
        <br>
        <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
      </div>
    </div>
  </div>
</div>

这是我试过的css；

.card.is-horizontal {
  flex-direction: row;
  display: flex;
  flex-basis: 50ex;
  flex-grow: 0;
  flex-shrink: 1;
  box-shadow: none;
}

.card.is-horizontal .card-image {
  align-self: center;
}

.card.is-horizontal .image {
  min-height: 100%;
}

.card.is-horizontal .card-content {
  flex: 1;
}

.card.is-horizontal .card-content {
  padding-left: 1em;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.8em;
}

.card.is-horizontal {
  ul {
    list-style: none;
    margin: 0;
  }

  .is-divider {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }
}

这里有一个方便的代码笔，我在其中进行了尝试。 https://codepen.io/rishavs/pen/zYvbgYZ?editors=0100

Answer 1

如果下面的代码对您有帮助，请告诉我。预览结果 here

HTML

<div class="container">
  <div class="columns">
    <div class="column">
      <div class="card is-fullimage">
    <div class="card-image">
      <figure class="image is-4by3">
        <img src="https://images7.alphacoders.com/303/303995.jpg" alt="Placeholder image">
      </figure>
      <div class="card-stacked">
        <div class="card-content">
          <div class="media-content">
            <p class="title is-4">John Smith</p>
            <p class="subtitle is-6">@johnsmith</p>
          </div>

          <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a>@bulmaio</a>.
            <a href="#">#css</a> <a href="#">#responsive</a>
            <br>
            <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
          </div>
        </div>
        <footer class="card-footer">
          <div class="card-footer-item has-text-left">
            <h1>Hello</h1>
          </div>
        </footer>
      </div>
    </div>
  </div>
    </div>
    <div class="column">
      <div class="card is-horizontal">
    <div class="card-image">
      <figure class="image is-square">
        <img src="https://images7.alphacoders.com/303/303995.jpg" alt="Placeholder image">
      </figure>

    </div>
        <div class="card-stacked">
        <div class="card-content">
          <div class="media-content">
            <p class="title is-4">John Smith</p>
            <p class="subtitle is-6">@johnsmith</p>
          </div>

          <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a>@bulmaio</a>.
            <a href="#">#css</a> <a href="#">#responsive</a>
            <br>
            <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
          </div>
        </div>
        <footer class="card-footer">
          <div class="card-footer-item has-text-left">
            <h1>Hello</h1>
          </div>
        </footer>
      </div>
  </div>
    </div>
  </div>
</div>

CSS

body {
  margin-top:3rem;
  margin-bottom: 3rem;
}

.card {
  &.is-horizontal {
    display: flex;

    .card-image {
      width: 100%;
      height: 100%;
    }

    .card-stacked {
      flex-direction: column;
      flex: 1 1 auto;
      display: flex;
      position: relative;

      .card-content {
        flex-grow: 1;
      }
    }
  }

  &.is-fullimage {
     background-color: transparent;
    .card-image {
      color: #fff !important;
      .card-stacked {
        position: absolute;
        bottom: 0;
        width: 100%;
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
        text-shadow: 0px 0px 2px #000000;

        .card-footer { 
          border-color: transparent;
        }

        .title, 
        .subtitle { 
          color: inherit;
        }

        a {
          color: inherit;

          &:hover {
            text-decoration: underline;
          }
        }
      } 
    }
  }

//   .card-footer {
//     .card-footer-item {
//       padding-left: 1.5rem;
//       padding-right: 1.5rem;
//     }

//     div.card-footer-item {
//       justify-content: unset;
//     }
//   }
}