Question

我一直在尝试在StackOverflow上列出的各种解决方案来解决这个问题，但似乎无法做到正确。在移动视图中，我们网站的右侧有空白区域。

任何提示？非常感谢。被困了几个小时。

http://www.hackerparadise.org

Answer 1

我已添加：

 html  {

    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 

}

在 CSS 的顶部高于其他类，它似乎可以解决您的问题。

Answer 2

我能看到的大部分问题都在你的引导结构上。您正在添加其他row，而不添加其他具有网格类的div，例如col-md-*

<强>示例：

<div class="container">
    <div class="row"> 
        <div class="row"> <!-- additional row -->
            <div class="inner-div">
                Inner Div
            </div>    
        </div>
    </div>
</div>

缩小浏览器时，此fiddle中会显示一个明显的问题。

<强>解决方案：

在添加其他row类元素之前，您必须首先添加一个具有网格class

的元素

<div class="container">
    <div class="row">
        <div class="col-md-12"> <!-- DIV with a grid class -->
            <div class="row">
              <div class="inner-div">
                Inner Div
              </div>    
            </div>    
        </div>
    </div>
</div>

您可以在此fiddle

上看到它已修复

在您的情况下，我可以看到#day和#about元素下的问题。

在#day下：

在#about下：

另一个问题是在CSS上。将此添加到您的CSS：

.btn-design {
   margin-left: 0;
   margin-right: 0;
}

Answer 3

在生命中的一天和我们的故事部分中，您有2个行类，需要将其删除。

<div id="day">
  <div class="container">
    <div class="row centered" style="padding-bottom: 20px;">
      <h1>A Day in the Life</h1>
      <div id="day-images" class="row"> <-- delete extra row here
        <div class="col-md-10 col-md-offset-1">

        </div>
      </div>
      <div class="col-md-8 col-md-offset-2" align="left">
        <p class="lead">All structure is optional at Hacker Paradise, so you can find a rhythm that works for you. Here is a sample day in the life:</p>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">

          </div>
        </div>
      </div>
    </div><!--/row-->
  </div><!-- /container -->
</div>


<section id="about">
  <div class="container pb">
    <div class="row">
      <div class="row centered"> <-- delete extra row here
        <h1>Our Story</h1>
        <div class="col-md-8 col-md-offset-2" align="left">

        </div>

        <br>
        <div class="col-md-8 col-md-offset-2" align="left">

        </div>
          <br>
        </div>
      </div><!--/row-->
    </div>

</section>

Bootstrap网站的白色空间右侧

3 个答案: