2016-08-27 8 views
0

私の個人的なウェブサイトで作業しています。スキルのセクションでは、コンテナの上部にアイコンの行を置きたいと思います。しかし、私がrow-fluidを上に置くと、問題が発生します。ブートストラップのアイコン行

参考のため、関連するコードとスクリーンショットを添付しました。どんな助けもありがとう!

w/out icons

with icons

<!--SKILLS DESCRIPTION --> 
<div id="skillswrap"> 
    <div class="container"> 
     <div class="row"> 
      <div class="wow fadeIn" data-wow-duration="5s" data-wow-offset="100"> 
       <div class="col-lg-2 col-lg-offset-1"> 
        <h4 style="color:white"><b>SKILLS</b></h4> 
       </div> 
       <div class="row-fluid"> 
        <p><img class="img-responsive" src="Theme/assets/img/html5.png" alt="" style="zoom:60%"></p> 
       </div> 
       <div class="col-lg-3 centered"> 
        <p><b>Front End Programming Skills</b></p> 
        <h5>HTML, CSS, JavaScript, Bootstrap, JQuery, AngularJS, Ionic Framework, D3 
         <br> 

       </div> 
       <div class="col-lg-3 centered"> 
        <p><b>Scripting Language Skills</b></p> 
        <h5>Python, Ruby</h5> 
        <br> 
       </div> 
       <div class="col-lg-3 centered"> 
        <p><b>Object Oriented Experience</b></p> 
        <h5>Java, C++</h5> 
        <br> 
       </div> 

       <div class="col-lg-3 col-lg-offset-3 centered"> 
        <p><b>Communication</b></p> 
        <h5>Strong writing, collaborative and interpersonal skills.</h5> 
        <br> 
       </div> 
       <div class="col-lg-3 centered"> 
        <p><b>Software</b></p> 
        <h5>Exposure to: Postman, JetBrains IDEs, Eclipse, Version control w/ Git, Adobe Creative 
         Suite.</h5><br> 
       </div> 
       <div class="col-lg-3 centered"> 
        <p><b>Diverse Technical Skills</b></p> 
        <h5>Programming, agile methedologies, QA testing, content management, data analytics</h5> 
        <br> 
       </div> 

      </div><!--/.row --> 
      <br> 
     </div><!--/.container --> 
    </div> 
</div><!--/ #skillswrap --> 

答えて

1

あなたはどちらかが右すなわちイメージをプッシュするoffsetまたはpushブートストラップクラスを持ってしようとしている:クラスにcol-lg-offset-1を追加し、

OR

あなたはpositionのCSS属性i .e:position:relative;left:10px

http://getbootstrap.com/css/オフセット、プッシュクラスの使用方法の詳細は、こちらをご覧ください。

関連する問題