Wie erreicht man dies mit Bootstrap?

Question

Ich habe einfach keine Idee, wie Sie dies auszeichnen, können Sie mir helfen?

Answer 1

* { 
 
    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; 
 
}

<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>

Dies ist nur um Ihnen eine Idee zu geben, wie man das macht ... das ist nicht einmal in der Nähe einer perfekten Lösung. Es gibt Unmengen von Faktoren, die in HTML-Template-Layouts einfließen, und ich habe einfach das schnellste getan, um ein einfaches Beispiel zu bekommen. Ich hoffe es hilft dir.