Question

目前我的网站看起来像这样。

这是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>

我想知道如何将图像元素移动几个像素，这样它们就不会对着上传按钮？而且我知道我将图像放在bootstrap中的方式必须完全错误和糟糕。我仍然是网络开发人员的菜鸟，所以我只是看着别人的代码并使其符合我的需求。

Answer 1

您可以在.data-image类

中添加margin

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

Answer 2

那么你可以通过以下几种方式做到这一点（有点欺骗）只需使用简单的<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>

你可以在我认为的行标记之前或之后添加它，但试试这个

Answer 3

试试＆lt; BR＆GT; （没有空格）它将打破一行;）

我看到这个答案已经给出了，抱歉

使用bootstrap在网站上降低运动图像

3 个答案: