Question

我很难找到正确的方法来实现这一目标＆＃39;网格系统（我可能会滥用它）。

我想要的是一个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

检查下面的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>

Answer 2

您可以将display: flex应用于.card，文本单元格将占据剩余宽度的50％，因为col类具有width: 50%。如果你想分割剩余的宽度，那么＆＃34; flex＆＃34;方式，您可以从文本div中删除col类，并为它们分配flex: 1 0 0;，以便它们增长以均匀地填充剩余空间。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Bootstrap 3.0行和图像/ div并排

2 个答案: