Question

这是我现在正在努力的小提琴 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>

基本上我在＆＃34;关于＆＃34;中发生的Bootstrap对齐有问题。 DIV。我似乎无法得到页面左侧的段落和页面右侧的列表。我认为我的CSS可能有问题。任何建议将不胜感激：）

Answer 1

如果您的问题是“关于我”标题和列表没有以相同的垂直高度开始，那么您必须对.to-fit CSS规则执行一些设置{{1}的规则}。

只需给右块提供适当大小的顶部填充或边距：

padding-top : 80px;

或

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

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

Answer 2

将班级container更改为container-fluid

    <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-fluid">
   <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>

bootstrap网格没有正确间距

2 个答案: