javascript - Bootstrap 3.0 行和图像/div 并排

Question

我无法找到使用 Bootstrap 的网格系统实现此目的的正确方法(我可能误用了它)。

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

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