如何在布尔玛制作水平卡？

Question

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

我确实尝试过使用CSS，但是无法创建有效的Horzontal卡。 这是我尝试的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;
//     }
//   }
}

Answer 2

制作一个 section，然后用 narrow column 和 auto column 填充它

在此处了解更多信息：https://bulma.io/documentation/columns/sizes/#narrow-column

示例：

（我添加了一个带有 narrow column 的 card。然后在 auto column 中我添加了一个导航栏；最后在右侧 auto 部分添加了一个页脚）

<section class="section">
  <div class="card">
    <div class="card-content">
      <div class="content">
        <div class="columns">
          <div class="column is-narrow">
            <div class="card-image">
              <figure class="image is-64x64">
                <img
                  src="{% static 'img/profile.png' %}"
                  alt="Placeholder image"
                />
              </figure>
              <div class="media-content has-text-centered">
                <p class="title is-4">
                  {{ user.first_name }} {{ user.last_name }}
                </p>
                <p class="subtitle is-6">@{{ user.username }}</p>
              </div>
            </div>
          </div>
          <div class="column">
            <nav class="level">
              <div class="level-item has-text-centered">
                <div>
                  <p class="heading">Tweets</p>
                  <p class="title">3,456</p>
                </div>
              </div>
              <div class="level-item has-text-centered">
                <div>
                  <p class="heading">Following</p>
                  <p class="title">123</p>
                </div>
              </div>
              <div class="level-item has-text-centered">
                <div>
                  <p class="heading">Followers</p>
                  <p class="title">456K</p>
                </div>
              </div>
              <div class="level-item has-text-centered">
                <div>
                  <p class="heading">Likes</p>
                  <p class="title">789</p>
                </div>
              </div>
            </nav>
            <footer class="card-footer">
              <a href="#" class="card-footer-item has-text-centered">message</a>
              <a href="#" class="card-footer-item has-text-centered">follow</a>
              <a href="#" class="card-footer-item has-text-centered">edit</a>
              <a href="#" class="card-footer-item has-text-centered">change password</a>
            </footer>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>