javascript - 自举网格间距不正确

Question

这是我现在正在制作的 fiddle http://codepen.io/trippygif/pen/KVWYdV

这是HTML

<div class="menu">
  <div id="title-list">
    <ul>
      <li><a href="#heading">Home</a></li>
      <li><a href="#about-me">About</a></li>
      <li><a href="#work-heading">Work</a></li>
      <li><a href="#">Contact</a></li>
  </div>
  </div>

<div class="title">
  <div id="heading">
<h1>AN OPEN PERSPECTIVE</h1>
</div>
  <div id="list">
    <ul>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Instagram</a></li>
      <li><a href="#">Reddit</a></li>
  </div>
</div>

 <div class="about">
   <div class="container">
   <div class="row">
      <div class="col-md-6">
      <h2 id="about-me" class="to-fit title-font">About Me</h2>
      <p id="interests" class="span4">I am a self taught web developer with      a degree in physics from the University of Colorado Boulder. I have strong interests in web design and development as well as mathematics.</p> 
     </div>
   <div class="col-md-6">
     <p>My Proficiencies</p>
     <ul>
       <li>#1</li>
       <li>#2</li>
       <li>#3</li>
     </ul>
  </div>
 </div>
</div>
  </div>


  <div class="work">
    <div id="work-heading" class="to-fit title-font">
      <h1>Work</h1>
    </div>
  </div>


  <div class="contact">
    <div id="work-heading" class="to-fit title-font">
      <h1>Contact</h1>
    </div>
  </div>

基本上，我在“关于”div 中出现的 Bootstrap 对齐方面遇到了问题。我似乎无法获取页面左侧的段落和页面右侧的列表。我假设我的 CSS 可能有问题。任何建议将不胜感激:)

Answer 1

如果您的问题是“关于我”标题和列表不在相同的垂直高度开始，那么您必须对您的 .to-fit CSS 规则做一些事情设置一个 padding-top : 80px;。

只需为您的右侧 block 提供适当大小的顶部填充或边距:

<div class="col-md-6" style="margin-top:120px;">
    <p>My Proficiencies</p>
    ...

或

<div class="col-md-6" style="padding-top:120px;">
    <p>My Proficiencies</p>
    ...

当然，您可以/应该将此规则放入带有您选择的选择器的 CSS 规则中。