Question

Hello Bootstrap专家！

目前，我正在做一个网络项目。但是我感觉很难创造一个部分。该部分有两列，在同一行中有两个不同的全宽背景。我该怎么做？以下是PSD https://ibb.co/mN4AU7

部分的屏幕截图

此致

Answer 1

我使用bootstrap行和列将全视图端口分成两部分。现在，您可以在第一列中插入引导程序轮播，并在第二列中插入表单代码。

div img {
      width: 100%;
      height: auto;
      height: 100vh;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <body>

    <div class="container-fluid">
      <div class="row">
        <div class="col-6 p-0">
          <!-- INSERT HTML CODE FOR CAROUSEL-->
          <img src=https://dummyimage.com/600x400/000/fff&text=insert+carousel+here>
        </div>
        <div class="col-6 p-0">
          <!-- INSERT HTML CODE FOR FORM -->
          <img src="https://dummyimage.com/600x400/ffffff/fff&text=insert+form+here">
        </div>
      </div>
    </div>
    </body>


    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

两个列具有两个不同的全宽背景，位于Bootstrap的同一容器和行中

1 个答案: