ブートストラップの底にあるポジショニングボタン

Question

こんにちは、ボタンの位置に問題があります。私は井戸の底にボタンが必要ですが、どういうわけか私はそれをそこに置くことはできません。ここで

は何が起こったかです：ボタンは、画像の横に終わるが、私はそれがここにも

の一番下にする必要があります私のコードです：

<div class="container"> 
<h2 class="center">CTTS Data</h2> 
    <div class="row"> 
    <div class="col-md-12 col-sm-12" id="CTTSData"> 


    <script> 
    $.ajax({ 
     url : "CR_Data/CTTS_Data.json", 
     type : "post", 
     contentType:"application/json", 
     success : function(list){   
      var divCol = "<div class='col-sm-4 col-md-4'>"; 
      var divWell = "<div class='well' style='position:relative'>"; 
      var divClose = "</div>"; 

      console.log(list); 

      list.forEach(function(obj, index) { 

      //console.log(obj); 

      var title  = "<h5>"  + obj.title + "</h5>"; 
      var linkStart = "<a href='" + obj.imagePath + "' target='_blank'>" ; 
      var image  = "<img class='thumbnailSmall' data-toggle='tooltip' data-placement='left' title='Click to open data' src='" 
           + obj.imagePath + "' height='100%' width='100%'/>" 
      var linkEnd = "</a>"; 
      var linkFile = "<a class='btn btn-danger' id='btnView' href='" + obj.filePath + "'>Open File</a>"; 

      var div = divCol + 
      divWell  + 
      title  + 
      // desc  + 
      linkStart  + 
      image  + 
      linkEnd + 
      linkFile + 
      divClose + 
      divClose; 

      $("#CTTSData").append(div); // insert the div you've just created 

      }) 
     } 
    }); 
    </script> 


    </div> 
    </div> 

</div> 
<!-- /.container --> 

CSS：私はこのように、ブートストラップ "行" の容器の内側にあなたのボタンを囲みたい

#btnView{ 
position: absolute; 
margin-bottom: 20px; 
} 

Answer 1

：

var divCol = "<div class='col-sm-4 col-md-4'>"; 
 
var divWell = "<div class='well'>"; 
 
var divClose = "</div>"; 
 

 
var title  = "<h5> title </h5>"; 
 
var linkStart = "<a href='#' target='_blank'>" ; 
 
var image  = "<img class='thumbnailSmall' data-toggle='tooltip' data-placement='left' title='Click to open data' src='path' height='100%' width='100%'/>" 
 
var linkEnd = "</a>"; 
 
var linkFile = "<div class='row'><a class='btn btn-danger' id='btnView' href='#'>Open File</a></div>"; 
 

 
var div = divCol + divWell + title + linkStart + image + linkEnd + linkFile + divClose + divClose; 
 

 
$("#CTTSData").append(div); // insert the div you've just created

#btnView{ 
 
    margin-top: 20px; 
 
    margin-left: 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <h2 class="center">CTTS Data</h2> 
 
    <div class="row"> 
 
    <div class="col-md-12 col-sm-12" id="CTTSData"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- /.container -->