Question

我的网站部分存在问题，但问题只发生在Chrome中（说实话，还没有试过Firefox）。在Safari中，＆＃34;关于＆＃34; div（如下所示）以正确的比例显示正常，但在Chrome中，p元素显示为太远而且大部分位于浏览器的左边缘且无法读取，并且#about_bg部分太过正确且行为不端。有什么想法吗？

链接位于：http://www.smoakvoiceover.com/#about

<!-- ABOUT -->
<div id="about" class="container-fluid">
  <div class="wrapper">
    <div class="row">
      <div id="about_bg" class="col-sm-3 col-sm-push-9">
        <img id="question_glyph" class="center-block" src="img/question_glyph.png" alt="about" />
        <h3 id="question_glyph_alt" alt="about">ABOUT.</h3>
      </div>
      <div class="col-sm-9 col-sm-pull-3 about_container">
        <p class="about_text">
          Outside of being "the voice," Bradley Smoak has had a variety of jobs throughout his career, most notably being an internationally acclaimed <a class="discreet" target="_blank" href="http://www.bradleysmoak.com">operatic soloist</a> featured at some of the top opera companies in the world.
          <br />
          <br />
          Other jobs have included bartender, boat renter, poker dealer, steakhouse cook, steakhouse waiter, steakhouse customer, website developer, illustrator, and computer game tester. From these incredibly diverse experiences, he brings a unique perspective to his voice acting and the ability to create a variety of specific, relatable characters that bring your copy to life.
          <br />
          <br />
          Originally from North Carolina, Bradley now makes his home in the wonderful Chicagoland area with his gorgeous wife and daughter, who put up with his "crazy voices" every day.
        </p>
      </div>
    </div>
    <div class="row">
      <div id="about_arrow" class="text-center">
        <a href="#services"><span class="text-center glyphicon glyphicon-circle-arrow-down"></span></a>
      </div>
    </div>
  </div>
</div>

这里是相应的.scss代码（通过SASS编译后）：

#about {
  background: url('../img/about_bg.jpg');
  background-size: cover !important;
  background-attachment: fixed;
  margin-bottom: -65px !important;
  z-index: 2 !important;
  position:relative;
  top:-57px !important;
}
#about_bg { 
  background-color: rgba(0, 0, 0, 0.825);
}
#question_glyph { 
  width: 50%;
  padding:220px 0px 270px 0px;
}
#question_glyph_alt { display: none; }
.about_container {
  margin: 250px auto;
  padding: 30px 35px;
  max-width:740px;
  text-align: left;
}
p.about_text { 
  color:#000 !important;
  font-size: 15px; 
}
#about_arrow > a {
  color: $white;
  width:40px;
  margin:0px auto;
  position:relative;
  bottom:100px;
  &:hover { color: $steel; }
}

谢谢你看看！

Answer 1

在Bootstrap列的左侧和右侧添加填充和边距将导致列超出包装器的最大宽度（如果您的列等于12）并且内容将换行。

引导结果在Chrome中出错

1 个答案: