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