尝试在 Bootstrap3 中重新创建页面

Question

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

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

所以我创建了这个 codepen，它基本上是我当前网站的布局：

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

因此，在 Chocolate Emporium 结帐页面上，右侧列中有一个 :after 伪元素，其 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中是否可以有相同的设计？

Answer 1

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

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, 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>
      </div>
    </div>