尝试在 Bootstrap3 中重新创建页面

Question

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

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

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

所以在 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>

尝试在 Bootstrap3 中重新创建页面

Trying to recreate a page in Bootstrap3

html

css

twitter-bootstrap

twitter-bootstrap-3