Bootstrap 3 - 缩略图表设计答案

【问题标题】：Bootstrap 3 - Thumbnail table designBootstrap 3 - 缩略图表设计
【发布时间】：2017-01-30 07:13:15
【问题描述】：

我尝试使用 bootstrap 3 设计缩略图

我无法以这种方式设计桌子，请您帮帮我

<div class="row">
    <div class="col-sm-4 col-xs-6">
    <div class="thumbnail">
      <img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
      <div class="caption">
        <h3>Plot 1</h3>
        <p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>        
        <a href="#">Electronic City</a></p>
        <table border="1" class="propertyDetails">
        <tr>
        <td>Price</td><td>Rs. 1400000</td>
        </tr>
        <tr>
        <td>Total Land</td><td>7 acres</td>
        </tr>
        <tr>
        <td>Total Plots</td><td>154</td>
        </tr>
        <tr>
        <td>Avaliable Plots</td><td>15</td>
        </tr>
        <tr>
        <td colspan="2" align="right"><div class="enquirybuttonclass">
        <input  class="btn btn-primary" type="button" value="ENQUIRY"></div> </td>
        </tr>
        </table> 

      </div>
    </div>
  </div>

我已附上图片：

【问题讨论】：

标签： css twitter-bootstrap html-table

【解决方案1】：

试试这个：

<div class="row">
    <div class="col-sm-4 col-xs-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
                <div class="caption">
                     <h3>Plot 1</h3>

                    <p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>  <a href="#">Electronic City</a>

                    </p>
                </div>
            </div>
            <table class="table" style="padding: 0; margin: 0;">
                <tr>
                    <td>Price</td>
                    <td>Rs. 1400000</td>
                </tr>
                <tr>
                    <td>Total Land</td>
                    <td>7 acres</td>
                </tr>
                <tr>
                    <td>Total Plots</td>
                    <td>154</td>
                </tr>
                <tr>
                    <td>Avaliable Plots</td>
                    <td>15</td>
                </tr>
            </table>
            <div class="panel-body">
                <input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
            </div>
        </div>
    </div>
</div>

Example

我没有使用缩略图类（通常仅用于保存图像），而是将整个内容更改为面板。第一部分，包括图像，包含在“面板主体”中，表格（现在具有“表格”类）已删除所有填充和边距，以便覆盖整个宽度，并且按钮已从将表格放入其自己的面板中，并使用“向右拉”类将其带到右侧。

【讨论】：

【解决方案2】：

从表格中删除边框，添加 table 类，你应该很高兴。

<div class="thumbnail">
  <img src="//placehold.it/250X100/DD66DD/EE77EE" class="img-responsive">
  <div class="caption">
    <h3>Plot 1</h3>
    <p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>        
    <a href="#">Electronic City</a></p>
    <table class="table">
    <tbody><tr>
    <td>Price</td><td>Rs. 1400000</td>
    </tr>
    <tr>
    <td>Total Land</td><td>7 acres</td>
    </tr>
    <tr>
    <td>Total Plots</td><td>154</td>
    </tr>
    <tr>
    <td>Avaliable Plots</td><td>15</td>
    </tr>
    </tbody></table> 

    <div class="text-right">
      <input class="btn btn-primary" value="ENQUIRY" type="button">
    </div>
  </div></div>

demo

【讨论】：