无法使用 bootstrap 实现自定义网格布局

Question

所以我已经 bootstrap 大约一个月了，所以我的 HTML 可能有点乱。问题的背景是我的任务 requires 我要创建一个自定义的光滑轮播以实现 UI 如下所示：

使用我当前的代码，这是我能够实现的：

这是我的 html 目前所取得的成就：

.slider-left {
  display: flex;
  align-items: center;
  p {
    font-size: 16px;
    border-bottom: 1px solid black;
    padding-bottom: 10px;
  }
}

.slider-middle {
  display: flex;
  align-items: center;
  word-break: break-word;
  h1 {
    font-weight: bold;
    color: blue;
  }
  h2 {
    text-transform: uppercase;
    font-style: italic;
    font-size: 16px;
    font-weight: normal;
  }
}

.v-center {
  width: 500px;
  height: 1000px;
  display: flex;
  align-items: center;
}

.slider-image {
  width: 100%;
}

.slider-right {
  padding: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container-fluid">
  <div class="row">
    <!-- Left most text -->
    <div class="col-lg-1 slider-left text-right">
      <div class="container center-align">
        <p>Publication</p>
      </div>
    </div>
    <!-- Middle Text -->
    <div class="col-md-4 slider-middle center-align">
      <div class="container">
        <h2>title2</h2>
        <h1>title1</h1>
        <p>hsdajflaflasdfldsfhlsadfhlsdjfsdljflsjdfsjlfalsjfhjlasfhlsflasfhalfhlasfdsjfdsjlfadsljfhslajfalsjfljsflajflaflajsfdjlafhghurthruhffnfjgjrgbhrturhtadsofadflnvfnilawieoil</p>
        <a></a>
      </div>
    </div>
    <!-- Carousel Image -->
    <div class="col-md-7 slider-right">
      <img class="slider-image" src="<?php bloginfo('template_directory'); ?>/assets/images/image1.jpg" alt="">
    </div>
  </div>
  <div class="row">
    <div class="col-5 slider-nav">
      <p>navigation</p>
    </div>
  </div>
</div>

我需要 uired 使用 bootstrap 来实现任何类型的 ui 设计，因为我的主管说这有助于提高网站的响应能力。这里发生的是整个容器一遍又一遍地移动到一个相似的容器。请让我知道该怎么做，任何解释都会有很大帮助。除此之外，如果有人知道如何在该导航栏中插入自定义按钮和自定义分页可以让我知道，我将非常感激，尽管我没有深入研究它。干杯:)

Answer 1

你的意思是这样的吗？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
<div class="row">
  <div class="col-md-6 col-sm-12">
    <div class="row">
      <div class="col-sm-4" style="background:#f2f2f2;">
        Publication
      </div>
      <div class="col-sm-8">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>

    <div class="row">
      <div class="col-sm-12" style="background:red;">navigation</div>
    </div>

  </div>

  <div class="col-md-6 col-sm-12" style="background:#999;">
    Image
  </div>
</div>
</div>

无法使用 bootstrap 实现自定义网格布局

Unable to achieve a custom grid layout with bootstrap

html

css

slick.js

bootstrap-4