引导3.0行和图像/ div并排

Question

我很难找出用bootstraps的网格系统（我可能会误用它）来完成此操作的正确方法。

我想要的是一个div，其中最左边缘是一个图像，其余的内容是一个完整大小的.row到表单字段。我想我缺少一些关于bootstrap如何使用它的各种类的基本知识。

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

小提琴：https://jsfiddle.net/p37bc1n0/

Answer 1

您可以只适用于display: flex和.card文字电池将占据剩余宽度的50％，因为山坳类有width: 50%。如果你想以“flex”的方式分割剩余的宽度，你可以从文本div中删除col类，并将flex: 1 0 0;赋值给它们，这样它们将增长到均匀地填充剩余空间。

$("#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

检查下面的jsfiddle。您需要3列布局：一个保留img，第二个保留前半部分内容，第三个保留后半部分内容。

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>