Question

我只需要在右侧（容器之外）向报价框添加背景色。报价框在容器中。我正在尝试position: absolute，但效果不佳。有可能做一个简单的方法吗？哦，我正在使用Bootstrap 4。

我想要什么：

我的代码：

.quote-box {
  background-color: #fbe6ff;
  padding: 65px;
  border-radius: 20px;
}

.quote-text {
  color: #111;
  font-size: 40px;
  font-weight: 300;
}

.quote-author {
  color: #666;
  font-weight: 300;
  font-size: 23px;
}

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div data-brackets-id="5087" class="quote">
      <div data-brackets-id="5088" class="row">
        <div data-brackets-id="5089" class="col-lg-12 quote-box text-center">
          <div data-brackets-id="5090" class="w-75 mx-auto">
            <h2 data-brackets-id="5091" class="quote-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</h2>
            <p data-brackets-id="5092" class="quote-author">- bbc.com</p>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </div>
</body>

Answer 1

设置margin-left属性，看看是否能满足您的需求。如果不是，请再次尝试position: absolute，并使用left属性。

Answer 2

您可以使用CSS。只需将所需的bg-color应用于body元素，然后将quotebox保留在body元素内的另一个容器中，并将quotebox的宽度设置为100％。

Answer 3

我将container更改为container-fluid，并给了margin-left。还指定了overflow-x:hidden是由于空白引起的。

.quote-box {
        background-color: #fbe6ff;
        padding-top: 65px;
        padding-bottom: 65px;
        border-radius: 20px;
    }
    .quote-text {
        color: #111;
        font-size: 40px;
        font-weight: 300;
    }
    .quote-author {
        color: #666;
        font-weight: 300;
        font-size: 23px;
    }

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body  style="overflow-x:hidden;">
<div class="container-fluid" style="margin-left:30px;">
<div data-brackets-id="5087" class="quote">
                <div data-brackets-id="5088" class="row">
                    <div data-brackets-id="5089" class="col-lg-12 quote-box text-center">
                        <div data-brackets-id="5090" class="w-75 mx-auto">
                        <h2 data-brackets-id="5091" class="quote-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</h2>
                        <p data-brackets-id="5092" class="quote-author">- bbc.com</p>
                        </div>
                    </div>
                </div>
            </div>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</div>
</body>

希望这会有所帮助。

100％宽度的物品只有一侧

3 个答案: