html - 需要使用 twitter/bootstrap 更正这个复杂的网格/表格布局

Question

我正在尝试使用 twitter-bootstrap 中的表格创建一个复杂的布局。但是，我无法完全正确!特别是显示 5 的地方!

是否可以使用 div 来实现同样的效果？在那种情况下我将如何获得边界？请检查附件的设计。

<div class="container">
            <table class="table table-bordered" style="width:80%">
                <tr>
                    <td class="col-md-6" colspan="4"><strong>1</strong></td>
                    <td class="col-md-4" rowspan="3"><img src="#" /></td>
                    <td class="col-md-2" rowspan="3"><button class="del-icon">X</button></td>
                </tr>
                <tr>
                    <td class="col-md-3"><strong>2</strong></td>
                    <td class="col-md-3"><strong>3</strong></td>
                </tr>
                <tr>
                    <td><strong>4</strong></td>
                    <td><strong>5</strong></td>
                </tr>
            </table>
        </div>

Answer 1

是的，这是可能的，您只需将行添加到 2,3，然后将另一行添加到 4,5

<div class="row">
<div class="col-md-6 blue1">
  1
  <div class="row">
    <div class="col-md-6 blue2">2</div>
    <div class="col-md-6 blue3">3</div>
  </div>
  <div class="row">
    <div class="col-md-2 blue4">4</div>
    <div class="col-md-10 blue5">5</div>
  </div>
</div>
<div class="col-md-4 blue6">
 img
</div>
 <div class="col-md-2 blue7">
 x
</div>

引导:http://www.bootply.com/mraM3WKCvt

希望对您有所帮助，cheerio!