2016-08-27 49 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

要麼你將不得不在offsetpush自舉類推肖像權,即:增加col-lg-offset-1上課,

OR

通過position css屬性我自己做.e .: position:relative;left:10px

http://getbootstrap.com/css/有關如何使用偏移量,推送類的更多信息。