Positionierungsknopf an der Unterseite der Bootstrap-Vertiefung

Question

Hallo, ich habe Probleme mit der Positionierung des Knopfes. Ich brauche den Knopf am Boden des Brunnens, aber irgendwie kann ich ihn nicht positionieren. Hier

ist, was passiert ist: die Taste endet an der Seite des Bildes, aber ich brauche es am unteren Rand des Brunnens

Hier sind meine Codes zu sein:

<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

ich Ihre Schaltfläche in einer Bootstrap "Reihe" Behälter einschließen würde, wie folgt aus:

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