重写为引导程序并在图像上使用转换

Question

我正在尝试在引导程序中添加以下横幅。横幅can be seen her的演示。

我不知道如何在Bootstrap 3中做到这一点以及从哪里开始。行和col在开始时应该像这样，还是应该只有一行？是$queues = []; foreach ($schedules as $schedule) { $queues[] = Queue::withTrashed() ->latest() ->where('schedule_id', $schedule)->get()->toArray(); } return $queues; 在图像上形成斜线吗？

transform

横幅的原始代码为：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">Text here</div>
        <div class="col-md-6"><img src="https://image-here.jpg"></div>
    </div>
</div>

.widget-about {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  }
  .widget-about .tg-container {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    max-width: 1200px;
    transform: translateX(-50%);
    }
    .widget-about .tg-container .about-content-wrapper {
      position: absolute;
      left: 0;
      top: 0;
      width: 50%;
      height: 100%;
      background: #f9f9f9; }
      .widget-about .tg-container .about-content-wrapper .about-block {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: 999; }
        .widget-about .tg-container .about-content-wrapper .about-block .about-title {
          font-size: 28px;
          margin: 0;
          text-transform: uppercase; }
          .widget-about .tg-container .about-content-wrapper .about-block .about-title a {
            color: #454545; }
        .widget-about .tg-container .about-content-wrapper .about-block .about-sub-title {
          color: #00a9e0;
          margin: 10px 0;
          font-size: 16px;
          text-transform: capitalize; }
        .widget-about .tg-container .about-content-wrapper .about-block .about-content {
          color: #737373;
          font-size: 14px;
          margin-top: 20px; }
      .widget-about .tg-container .about-content-wrapper:before {
        content: "";
        position: absolute;
        width: 1000%;
        height: 100%;
        background: #f9f9f9;
        left: -1000%;
        top: 0; }
      .widget-about .tg-container .about-content-wrapper:after {
        background: #f9f9f9 none repeat scroll 0 0;
        content: "";
        height: 2000px;
        position: absolute;
        right: 650px;
        top: 50%;
        transform: rotate(70deg) translateY(-50%);
        width: 2000px;
        z-index: 9; }

    .about-img {
    /* margin: 0; */
    }
  .about-img img {
    width: 100%;
    display: block; }

Answer 1

修改

没有一些自定义css，您将无法完全匹配，因此这是我的最低要求，主要使用自举类和一些自定义css，以获得所需的样式（小倾斜）和预期的响应行为。

.custom-bg {
  background-size: cover;
  background-position: center right;
  min-height: 100px !important;
}

.custom-content:after {
  background: transparent;
  border-top: 250px solid transparent;
  border-bottom: 0px solid transparent; 
  border-left: 80px solid #f7f7f7; 
  content: '';
  height: 100%; 
  position: absolute;
  right: -80px;
  top: 0;
  width: 0; 
  z-index: 10;
}

.custom-row {
  margin: 0 !important;
}

@media (max-width: 991px) {
  .custom-bg {
  background-position: top right;
}
  
.custom-row {
 flex-direction: column-reverse; 
}
  
  .custom-content:after {
    display: none
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row custom-row">
  <div class="col-lg-7 col-sm-12">
    <div class="p-3 custom-content">
      <h3>Best Store Theme</h3>
    <h5 class="text-primary">Multicolor & Multipurpose Woocommerce Theme</h5>
      <p>Aenean ipsum felis, luctus in hendrerit eget, varius non lacus. Duis et aliquet lacus. Quisque iaculis congue facilisis. Aenean eu dolor vestibulum, lobortis ligula eu, rhoncus diam. Etiam et efficitur augue. Etiam vehicula sem quis risus elementum euismod. Sed id mattis sapien. Ut lacinia aliquam massa eget efficitur. Suspendisse fermentum eget leo suscipit faucibus. Morbi</p>
    </div>
  </div>
  <div class="col-lg-5 col-sm-12 custom-bg" style="background-image: url('https://demo.themegrill.com/estore/wp-content/uploads/sites/49/2016/02/about.jpg')">
  </div>
</div>