Bootstrap CSS问题

时间:2016-03-23 20:25:44

标签: html css twitter-bootstrap

我正在制作的网站出现问题。我正在使用bootstrap并在一个特定的页面上使用基本的bootstrap css,这些东西不会排成一行。

我的代码如下: -

<section id="aboutUs">
<div class="container">  
<div class="row">         
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">            
        <img style="width: 500px; height: 288.31775700934577px;" src="/media/1010/macbook-front.png?width=500&amp;height=288.31775700934577" alt="" rel="1255" data-id="1255" />             
        <br />          
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">           
        <h3>Passion is what we stand for</h3>     
        <p>Manta Ray bonytail chub. Russian sturgeon yellow tang cichlid creek chub--Siamese fighting fish poacher--sablefish bichir? Bonnetmouth gray eel-catfish luminous hake frogfish rohu, eel tope snake eel clown loach northern squawfish Australian prowfish, wrymouth.</p>
        <br />            
        <blockquote>             
            <p>Good is the enemy of great</p>Innova Tamashi            
        </blockquote>
    </div>
</div>      
<div class="row">         
    <div class="col-lg-12">           
        <hr />         
    </div>
</div>       
<div class="row">         
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">        
        <h3>Who we are</h3>       
        <p>Enjoy smooth graphics and timeless design with Innova. Elements of different trends are blended into a special mix.</p>
    </div>       
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
        <h3>What we do</h3>         
        <p>Enjoy smooth graphics and timeless design with Innova. Elements of different trends are blended into a special mix.</p>
    </div>         
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
        <h3>Why we do it</h3>         
        <p>Enjoy smooth graphics and timeless design with Innova. Elements of different trends are blended into a special mix.</p>
    </div>
</div>
</div></section>

问题在于,在最后一行(包含'我们是谁','我们做什么')中,所有div都显示为脱节,如here所示。我无法弄清楚它为什么这样做,因为它们应该与我能说的完全一致。任何想法的家伙?

2 个答案:

答案 0 :(得分:0)

查看您关联的网站,相关部分中有&nbsp;个字符行。删除这些将解决错位问题。

答案 1 :(得分:0)

因为没有空格&nbsp;

目前您的网页如下所示:https://jsfiddle.net/7oe5kh9L/57/

这是固定页面:https://jsfiddle.net/7oe5kh9L/58/

HTML

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
    <h3>Who we are</h3>
    <p>Enjoy smooth graphics and timeless design with Innova. Elements of different trends are blended into a special mix.</p>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
    <h3>What we do</h3>
    <p>Enjoy smooth graphics and timeless design with Innova. Elements of different trends are blended into a special mix.</p>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
    <h3>Why we do it</h3>
    <p>Enjoy smooth graphics and timeless design with Innova. Elements of different trends are blended into a special mix.</p>
  </div>
</div>