如何实现与示例一致的带图片自定义Bootstrap网格布局？

看起来你想要实现的是左侧固定图片列，右侧多列两行排列的布局，原代码的问题主要出在这几点：

• 所有列都塞在同一个row里，没遵循Bootstrap每行12列的规则，导致列自动换行混乱
• 手动加float: right打乱了Bootstrap默认的列浮动逻辑，直接破坏了网格布局
• 右侧内容没有独立的容器包裹，没法和左侧图片形成整齐的对齐布局

下面是修改后的代码，完美匹配你想要的效果：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <!-- 左侧图片列：占2格 -->
    <div class="col-sm-2">
      <img alt="66x66" class="media-object" style="width: 70px; height: 70px; background-color: red;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNjBiNjU1ZGVjYyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE2MGI2NTVkZWNjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNGRkM1MzMiLz48Zz48dGV4dCB4PSIxMy40Njg3NSIgeT0iMzYuNSI+NjR4NjQ8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
    </div>
    <!-- 右侧内容容器：占10格，内部嵌套row实现两列布局 -->
    <div class="col-sm-10">
      <div class="row">
        <div class="col-sm-6" style="border: 1px solid black;">1</div>
        <div class="col-sm-6" style="border: 1px solid black;">2</div>
        <div class="col-sm-6" style="border: 1px solid black;">3</div>
        <div class="col-sm-6" style="border: 1px solid black;">4</div>
        <div class="col-sm-6" style="border: 1px solid black;">5</div>
        <div class="col-sm-6" style="border: 1px solid black;">6</div>
      </div>
    </div>
  </div>
</div>

关键修改说明： #

1. 拆分主布局：把页面分成左侧col-sm-2（图片）和右侧col-sm-10（内容容器），两者总和12，严格遵循Bootstrap网格规则
2. 嵌套子网格：在右侧容器里新增row，内部用col-sm-6实现每行两列的排列，自动对齐整齐
3. 清理错误样式：删掉了手动添加的float: right，让Bootstrap默认的浮动逻辑处理列排列
4. 标记图片：给图片加了红色背景，对应你提到的红色方块图片

修改后就能实现你要的效果：左侧固定显示红色图片，右侧两列一行排列内容块，所有元素对齐规整。

内容的提问来源于stack exchange，提问作者th3g3ntl3man