无法使用引导程序实现自定义网格布局

Question

所以我已经做了大约一个月的引导程序，所以我的 HTML 可能有点乱。问题的背景是我的任务需要我创建一个自定义的光滑轮播来实现如下所示的 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>

我需要使用 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>