引导程序网格间距不正确

bootstrap grid not spacing properly

本文关键字：不正确 网格 引导程序      更新时间：2023-09-26

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

基本上，我在"about"div中出现的Bootstrap对齐问题。我似乎无法获得页面左侧的段落和页面右侧的列表。我想我的CSS可能有问题。任何建议都将不胜感激：）

如果您的问题是"关于我"标题和列表的起始高度不相同，那么您必须使用.to-fit CSS规则设置padding-top : 80px;。

只需给你的右块一个适当大小的顶部填充或边距：

<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规则中。

将类别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>
相关文章：