尝试在 Bootstrap3 中重新创建页面

如何解决尝试在 Bootstrap3 中重新创建页面

Chocolate Emporium 网站上有一个页面，它使用了我非常想效仿的 Shopify 结账方式。然而，我正在模拟它的网站使用 Bootstrap3，我认为这是让它变得困难的原因。

好的，这是我喜欢的结帐页面： https://the-chocolate-emporium.com/cart （您必须在购物车中添加一些东西才能查看结帐页面，抱歉。这不是他们网站的广告，我只是喜欢结帐过程）

所以我创建了这个代码笔，它基本上是我当前站点的布局：

https://codepen.io/chud37/pen/jOVmrQK

因此，在 Chocolate Emporium 结帐页面上，右侧栏中有一个 :after psuedo 元素，其 CSS 如下所示：

content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: #f6f2e7;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 30px #dddad0 inset;
    box-shadow: 0px 0px 30px #dddad0 inset;
    background-position: left top;
    width: 300%;

所以真正的大问题是 width:300%。它导致页面超宽，因此显示水平滚动条。然而，在 Chocolate Emporium 网站上，滚动条没有显示，我不知道为什么。最大的不同是他们到处使用 flexbox，而 boostrap3 没有。

是否可以在没有水平滚动条的情况下在 bootstrap3 中使用相同的设计？

解决方法

您究竟为什么要根据自己的品味和创造力复制您想要更改的所有内容？也许你可以设计出更好的东西。我稍微改变了你的来源。不知道你喜不喜欢

css

*{
  margin:0;
  padding:0;
}
body
{
  overflow:hidden;
}
.left-side,.right-side {padding: 50px;}

.right-side {height: 100vh;}
.right-side:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: #f6f2e7;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 30px #dddad0 inset;
    box-shadow: 0px 0px 30px #dddad0 inset;
    background-position: left top;
    width: 100%;

}

html

 <div id="wrapper">
      <div id="content">
          <div class="row">
            <div class="left-side col-xs-7">
                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Maecenas feugiat euismod orci,nec auctor sapien ultricies eu. Mauris rhoncus turpis leo,et rutrum leo congue bibendum. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Morbi ultricies sed ex a imperdiet. Fusce feugiat nibh nunc,eget dapibus felis tempus id. Duis at lorem interdum,commodo ante sed,efficitur justo. Quisque semper sit amet purus ut maximus. Suspendisse fringilla vitae tellus eu viverra. Nam dolor ante,scelerisque id enim id,pulvinar maximus sem. Vivamus tristique erat non leo ultrices maximus. Sed vitae nunc auctor,placerat nunc et,pharetra ipsum. Sed a pretium nulla. Aenean felis orci,dictum at nibh quis,tristique egestas lacus.

    Aliquam ornare tellus et tincidunt aliquet. Fusce at felis eleifend sem mattis sodales suscipit in orci. Donec in cursus neque. Duis in odio malesuada,eleifend risus vel,ultrices erat. Phasellus vel mi nec sem rhoncus malesuada. Aenean tristique sit amet ante id suscipit. Mauris non viverra nunc. Etiam sagittis lectus sed felis elementum,at vulputate lorem feugiat.
            </div>
            <div class="right-side col-xs-5">
              
              Lorem ipsum dolor sit amet,at vulputate lorem feugiat.
            </div>
          </div>
      </div>
    </div>