css - Bootstrap 上同一容器和行中具有两个不同全 Angular 背景的两列

标签 css twitter-bootstrap

您好 Bootstrap 专家!

目前,我正在做一个网络元素。但我感觉很难创建一个部分。该部分有两列,同一行中有两个不同的全 Angular 背景。我怎样才能做到?这是 PSD https://ibb.co/mN4AU7 部分的屏幕截图

问候

最佳答案

我使用 bootstrap 行和列将全 View 端口分为两部分。现在您可以在第一列中插入您的 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>

关于css - Bootstrap 上同一容器和行中具有两个不同全 Angular 背景的两列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49832419/

相关文章:

css - Bootstrap 响应式背景图片

jquery - Bootstrap - 平板电脑 View - 文本/图像位置

javascript - 无法访问 http 站点以在我的 https 站点中获取 map 标记

html - CSS 换行符仅不在 IE 中?

javascript - 在 Javascript Text Typer Effect 中需要帮助

html - 液体模板是指集合中的第一项?

jquery - 为什么我的覆盖层无法覆盖 Bootstrap 导航栏?

html - IE6/IE7 + 圆 Angular ...额外不需要的填充

javascript - jQuery 不是同时动画 div

html - float 元素的动态高度