如何使用bootstrap实现这一目标？

Question

我根本不知道如何标记这个，你能帮帮我吗？

Answer 1

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
.wrapper {
  background-color: #ddd;
}
.flex-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: wrap;
}
.flex-item {
  flex: 1 1 50%;
  border-bottom: 1px #999 solid;
}
.flex-item:nth-child(odd) {
  border-right: 1px #999 solid;
}
.service {
  position: relative;
  padding: 10px 10px 10px 140px;
}
.service__image-wrapper {
  background-color: #0EBEFF;
  position: absolute;
  top: 15px;
  left: 15px;
  height: 100px;
  width: 100px;
  transform: skewx(-10deg);
}
.service__image {
  position: absolute;
  top: 25px;
  left: 35px;
  border: 1px white solid;
  height: 50px;
  width: 30px;
  transform: skewx(10deg);
}
.service__title {
  color: orange;
}

＆＃13;

<div class="wrapper">
  <ul class="flex-items">
    <li class="flex-item">
      <!-- media block -->
      <div class="service">
        <span class="service__image-wrapper">
          <span class="service__image"></span>
        </span>
        <h3 class="service__title">Brand Identity</h3>
        <p class="sercie__description">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti?
        </p>
      </div>
    </li>
    <li class="flex-item">
      <!-- media block -->
      <div class="service">
        <span class="service__image-wrapper">
          <span class="service__image"></span>
        </span>
        <h3 class="service__title">Brand Identity</h3>
        <p class="sercie__description">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti?
        </p>
      </div>
    </li>
    <li class="flex-item">
      <!-- media block -->
      <div class="service">
        <span class="service__image-wrapper">
          <span class="service__image"></span>
        </span>
        <h3 class="service__title">Brand Identity</h3>
        <p class="sercie__description">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti?
        </p>
      </div>
    </li>
    <li class="flex-item">
      <!-- media block -->
      <div class="service">
        <span class="service__image-wrapper">
          <span class="service__image"></span>
        </span>
        <h3 class="service__title">Brand Identity</h3>
        <p class="sercie__description">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti?
        </p>
      </div>
    </li>
    <li class="flex-item">
      <!-- media block -->
      <div class="service">
        <span class="service__image-wrapper">
          <span class="service__image"></span>
        </span>
        <h3 class="service__title">Brand Identity</h3>
        <p class="sercie__description">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti?
        </p>
      </div>
    </li>
    <li class="flex-item">
      <!-- media block -->
      <div class="service">
        <span class="service__image-wrapper">
          <span class="service__image"></span>
        </span>
        <h3 class="service__title">Brand Identity</h3>
        <p class="sercie__description">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti?
        </p>
      </div>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

这只是为了让您了解如何实现它...这甚至不是一个完美的解决方案。 HTML模板布局中有很多因素，我只是做了最快速的事情来获得一个基本的例子。我希望它可以帮助你。