【问题标题】:How can i make full width responsive div section using bootstrap?如何使用引导程序制作全宽响应式 div 部分?
【发布时间】:2018-06-22 07:26:47
【问题描述】:

如何使黄色部分全宽?我在引导程序中尝试了部分和 div 容器流体,但没有运气。我认为父 css 中存在我无法覆盖的固定尺寸。我只想制作一个响应式 div 部分全角,这样我就可以使用背景颜色或图像背景。提前致谢。

有问题的页面: http://dev.dragonscaletech.com/our-story/

<div class="container" style="background-color: yellow;">
<div class="row">
<div class="col-12 text-center">
  <h2>Reaching the Root of the problem..</h2>
  <h4>Scrubbing your back daily has always been so uncomfortable & 
 unrealistic, until now!</h4>
  <p>The fact that it allowed easy & hands-free access to the absolute hardest to reach area of the human body, meant that we needed to make it count & go after the root of the problem.</p>
  <p>We constantly neglect our back when we shower.</p>
  <p>Every other solution to this widespread hygiene shortcoming requires a full range of arm & body mobility, which frankly, not everyone has.</p>
  <p>Something as common as having sore muscles from last night's work out or even having too much muscle, can limit you from using any of these "alternatives-on-a-stick". Age, injury & disability can make it impossible.</p>
  <p>Once we understood the core issue, we got to work.</p>
</div>

【问题讨论】:

  • 欢迎您!大多数人不想点击链接来寻找你的代码。请更新您的问题并包含相关问题的代码示例。

标签: html css wordpress twitter-bootstrap


【解决方案1】:

Bootstrap 容器确实有 15px paddingrow- 15px margin。因此,要么将row 类添加到您的section,要么将- 15px margin 添加到您的黄色section。希望下次可以使用代码或尝试使用代码进行快速响应。

【讨论】:

  • 我希望黄色部分在屏幕上是全角的。模板中有一个固定的尺寸,我不知道要覆盖它。如果我删除填充或边距,它不会使其在屏幕上变黄。变化很小。
  • 你用过container-fluid吗。
  • 我尝试了容器流体,没有任何变化。 wordpress 主题受 @media (min-width: 1200px) 影响。如果我将宽度更改为 100% 几乎会拉伸全角,但会影响页面上的每个容器。我想让这个单个容器全宽。我只是在css中尝试了一个ID,但仍然没有运气。
  • 看起来你的黄色 container 被引导程序 container 包围。检查一下。
【解决方案2】:

在谷歌上大量搜索后找到了这段代码。修复了我的问题。

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
 }

https://coderwall.com/p/hkgamw/creating-full-width-100-container-inside-fixed-width-container

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-04-05
    • 1970-01-01
    • 2015-01-06
    • 1970-01-01
    • 2018-06-23
    • 1970-01-01
    • 2019-05-07
    • 1970-01-01
    相关资源
    最近更新 更多