Bootstrap 3.0 Zeile und Bild/div nebeneinander

Question

Ich habe Probleme herauszufinden, die richtige Methode, dies mit Bootstraps Grid-System zu erreichen (ich kann es missbrauchen).

Was ich will, ist ein Div, in dem die linke Kante ein Bild ist, und der verbleibende Inhalt ist ein voller Größe .Row zu Hause Formularfelder. Ich denke, ich vermisse etwas Grundlegendes darüber, wie Bootstrap seine verschiedenen Klassen verwendet.

<div class="card"> 
    <span class="f-icon glyphicon glyphicon-file pull-left"></span> 
    <div class="col-xs-6 col-sm-6 col-md-6"> 
    I want this to be the first half of the remaining content 
    </div> 
    <div class="col-xs-6 col-sm-6 col-md-6"> 
    I want this to be the second half of the remaining content 
    </div> 
</div> 

Geige: https://jsfiddle.net/p37bc1n0/

Answer 1

können Sie gelten nur display: flex-.card und die Textzellen werden 50% der verbleibenden Breite besetzen, da die col Klassen width: 50% haben. Wenn Sie die verbleibende Breite auf die "Flex" -Weise verteilen möchten, können Sie die Col-Klassen aus den Text-Divs entfernen und ihnen flex: 1 0 0; zuweisen, sodass sie wachsen und den verbleibenden Platz gleichmäßig ausfüllen.

$("#edit-uploads-modal").show();

.card { 
 
    box-shadow: 1px 2px 8px #888888; 
 
    box-sizing: border-box; 
 
    background: linear-gradient(to right, #f7f7f7, #fff); 
 
    border-radius: 2px; 
 
    height: 100px; 
 
    margin: 5px 5px; 
 
    display: flex; 
 
} 
 

 
.card > div { flex: 1 0 0; } 
 

 
.f-icon { 
 
    font-size: 6em; 
 
    margin-top: 8px; 
 
} 
 

 
.modal-style { 
 
    width:900px; 
 
    margin: 0 auto; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.css" rel="stylesheet"/> 
 
<button id="edit-uploads" class="btn btn-primary" type="button" data-toggle="modal" data-target="#edit-uploads-modal">Edit Uploads</button> 
 

 
<div id="edit-uploads-modal" class="modal fade in" tabindex="-1" role="dialog" style="display: none;"> 
 
    <div class="modal-style" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h4 class="modal-title">Edit Uploads</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="card"> 
 
      <span class="f-icon glyphicon glyphicon-file"></span> 
 
      <div> 
 
      I want this to be the first half of the remaining content 
 
      </div> 
 
      <div> 
 
      I want this to be the second half of the remaining content 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button id="update" class="btn btn-primary" type="button">Save</button> 
 
     <button id="save-files" class="btn btn-primary" type="button">Save And Submit</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Überprüfen Sie die unten jsfiddle. Sie benötigen 3 Spaltenlayouts: Eines, um den ersten Teil des Inhalts beizubehalten, und zweitens, um die zweite Hälfte des Inhalts beizubehalten.

https://jsfiddle.net/Smita31Jain/ctm7juLj/

<div class="card"> 
    <div class="col-xs-2 col-sm-2 col-md-2"> 
    <span class="f-icon glyphicon glyphicon-file pull-left"></span> 
    </div> 
    <div class="col-xs-5 col-sm-5 col-md-5"> 
    I want this to be the first half of the remaining content 
    </div> 
    <div class="col-xs-5 col-sm-5 col-md-5"> 
    I want this to be the second half of the remaining content 
    </div> 
    </div>