-Layout für Text und Schaltflächen neben einem Bild angezeigt wird

Question

ich so etwas zu erledige wollen:

Und so weit nach Stunden des Bootstrap-Lernen und mit dem Grid-System zu spielen habe ich es geschafft, dies zu tun:

-Code, die ich benutze:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
      <div class="row-fluid"> 
 
      <div class="col-md-4"> 
 
       <img class="img-responsive" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUxMDc1OTAzM15BMl5BanBnXkFtZTgwOTMwOTMyMDI@._V1_SY1000_CR0,0,674,1000_AL_.jpg" style="width: 130px; height: 200px"> 
 
      </div> 
 
      <div class="col-md-8"> 
 
       <div class="row"> 
 
       <div class="text-title">Logan 2017</div> 
 
       <p> 
 
        Set in the future, Logan and Professor Charles Xavier must cope with the loss of the X-Men when a corporation lead by Nathaniel Essex is bent on destroying the world. With Logan's healing ... 
 
       </p> 
 
       </div> 
 
       <div class="row"> 
 
       <button class="btn btn-warning btn-bold-text">IMDb</button> 
 
       <button class="btn btn-danger pull-right"><span class="glyphicon glyphicon-remove"></span></button> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Wie Sie sehen können, möchte ich in der Lage sein, das Bild auf die Größe des Panels zu maximieren, die Knöpfe unten zu halten und den Rand des Textes zu fixieren.

Kann mir jemand helfen? Vielen Dank!

Ich brauche niemanden, der den Code für mich tut, sag mir einfach, wonach ich suchen soll. Gibt es einen Abstand zwischen den Spalten im Bootstrap? Ich habe versucht, mit Rändern und Paddeln zu spielen, aber keine Chance zu haben, was ich will.

Answer 1

https://jsfiddle.net/0jv537r0/1/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <div class="well" style="position: relative; background: #fff;"> 
 
     <div class="row"> 
 
      <div class="col-xs-4"> 
 
      <img class="img-responsive" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUxMDc1OTAzM15BMl5BanBnXkFtZTgwOTMwOTMyMDI@._V1_SY1000_CR0,0,674,1000_AL_.jpg"> 
 
      </div> 
 
     <div class="col-xs-8"> 
 
     <div class="text-title">Logan 2017</div> 
 
     <p> 
 
     Set in the future, Logan and Professor Charles Xavier must cope with the loss of the X-Men when a corporation lead by Nathaniel Essex is bent on destroying the world. With Logan's healing ... 
 
     </p> 
 
     </div> 
 
     </div> 
 
     <button class="btn btn-warning btn-bold-text" style="position: absolute; bottom: 20px; left: 33.33333333%;">IMDb</button> 
 
       <button class="btn btn-danger pull-right" style="position: absolute; bottom: 20px; right: 20px;"><span class="glyphicon glyphicon-remove"></span></button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

So habe ich es zu einem gut anstelle eines Panels, da Sie tatsächlich jede der Plattenelemente außer der Grenze wern't verwenden. Meine Antwort ist nicht 100% voller Beweis, Sie möchten die Stile nicht inline bringen und Details für verschiedene Bildschirmbreiten hinzufügen, aber auf den Punkt gebracht, zumindest können Sie sehen, was ich getan habe, um Ihr Ziel zu erreichen. Sie könnten auch flexbox verwenden und dann die Tasten innerhalb der col-xs-8 behalten, denn mit felxbox könnten Sie die Höhe des col-xs-8 Elements der Höhe des Bildes anpassen.

Ihr "Problem" ist ein Commong eins. Platzieren von Elementen am unteren Rand eines übergeordneten Elements. Es gibt im Allgemeinen keine Out-of-the-Box-Lösung, um dies zu erreichen. Sie müssen die absolute Position verwenden. Diese Positionselemente basieren auf ihrem am nächsten liegenden nicht statischen Elternteil. Sie könnten dies auf dem col-xs-8 Element tun, aber da seine Höhe nicht mit der des Bildes übereinstimmt, das wird nicht funktionieren, müssen Sie die Schaltflächen außerhalb der Spalte verschieben. (Spalten im Bootstrap haben standardmäßig eine nicht statische Position).

Jetzt gibt es unzählige Möglichkeiten, um zu erreichen, was Sie wollten Ich wählte nur die Route Schrank zu dem, was Sie hatten. Ich könnte vorschlagen, das media Objekt (http://getbootstrap.com/components/#media) nativ zum Bootstrap. Wickeln Sie das Medienelement in einen Wrapper mit einem Rahmen und Sie sollten in der Nähe sein, was Sie wollen, aber wirklich, Medien, Panel, Brunnen sind sie alle ähnlich. Aus diesem Grund wurden sie in Bootstrap 4 zugunsten von Karten entfernt. Sie könnten auch besser mit BS4 gehen. Es kommt näher und näher zu veröffentlichen und ich habe eine Website fertig mit dem aktuellen Alpha und es ist ziemlich solide. Wir sind dabei, das Projekt auch in die Produktion zu bringen.