使用引導程序在網站上移動圖像較低

這裏的HTML

<html ng-app="app"> 
    <head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="css/opencv_css.css" /> 
    </head> 

    <nav class="navbar navbar-default"> 
    <div class="container">     <!-- top intro part --> 
     <div class="navbar-header"> 
    <a class="navbar-brand" href="#/"> OPENCV 3.0.0</a> 
     </div> 

     <ul class="nav navbar-nav navbar-right"> 
    <li><a href="#/"><i class="fa fa-home"></i> Home</a></li> 
    <li><a href="#/about"><i class="fa fa-shield"></i> About</a></li> 
    <li><a href="#/contact"><i class="fa fa-comment"></i> Contact</a></li> 
     </ul> 
    </div> 
    </nav> 

    <body ng-controller="MainController"> 

    <div class="row"> <!-- Dropdown menu --> 

     <div class="col-md-20"> 
    <div id="main"> 
     <form class="form-horizontal" role="form"> 
     <label class="control-label col-md-2">Filter List:</label> 
     <div class="col-md-5"> 

      <select class="form-control" 
       ng-model="template" 
       ng-options="t as t for t in templates"> 
      </select> 
     </div> 
     </form> 
    </div> 
     </div> 

     <input type="file" id="fileToUpload" name="fileToUpload"> 
     <button ng-click="add()">Upload</button> 
    </div>  

    <div class="row"> 

     <div class="col-md-push-2 col-sm-push-1 col-lg-push-1 col-md-8-col-sm-8 col-lg-6 text-warning"> 
    <div id="imagesData">  
     <img id="img1" src="" alt="" class="data-image" /> 
    </div> 
     </div> 

     <div class="col-md-push-4 col-sm-push-2 col-lg-push-2 col-md-16-col-sm-16 text-warning"> 
    <div id="imagesData">  
     <img id="img2" src="" alt="" class="data-image" /> 
    </div> 
     </div> 

    </div> 


    <script src="js/jQuery.js"></script> 
    <script src="js/angular.js"></script> 
    <script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>  
    <script src="js/app.js"></script> 

    </body> 
</html>

我不知道我怎麼會動的圖像元素短短像素較低，使他們不正確對上傳按鈕？而且我知道，我將這些圖像放置在引導程序中的方式必定是完全錯誤和可怕的。我仍然是web開發人員的小菜鳥，所以我只是看着別人的代碼，並使其符合我的需求。

來源

2015-12-21 Zypps987

你嘗試了一些CSS？像填充或邊距..？和btw：不要在頁面上使用兩次id（例如imagesData）.. – Sebsemillia

'margin-top'不起作用？ –

嘗試< BR>（無空格），這將打破一行;）

我看到這個答案已經給出，對不起：＃

來源

2015-12-21 14:44:12

反正我會投票給你：P – Zypps987

哈哈感謝隊友:) –

這個也工作得很好！我已經提出了你的意見，然後我提高了其他人現在我不能upvote你...所以我剛給你的複選標記！請享用！ – Zypps987

您可以將margin添加到您的。數據圖像類

.data-image { 
    margin: 10px 0px; 
}

來源

2015-12-21 14:37:49 Elow

那裏有好幾個方法可以做到這一點，首先（還挺cheaty），只要用簡單的<br>標籤是這樣的...

<br><br> <--- right here 


<div class="row"> 

     <div class="col-md-push-2 col-sm-push-1 col-lg-push-1 col-md-8-col-sm-8 col-lg-6 text-warning"> 
    <div id="imagesData">  
     <img id="img1" src="" alt="" class="data-image" /> 
    </div> 
     </div> 

     <div class="col-md-push-4 col-sm-push-2 col-lg-push-2 col-md-16-col-sm-16 text-warning"> 
    <div id="imagesData">  
     <img id="img2" src="" alt="" class="data-image" /> 
    </div> 
     </div> 

    </div>

您可以在之前或行標籤我想以後添加，但嘗試這個

來源

2015-12-21 14:39:49

感謝這工作！ – Zypps987

很高興聽到^^ –

使用引導程序在網站上移動圖像較低

回答

相關問題