将图像放在响应表中

Question

我正在创建一个响应表，如下图所示。但是，我在最后一列中对齐图像时遇到了问题。我该如何解决？

的jsfiddle： https://jsfiddle.net/whywymam/7o3192rt/

我的Html：

<div class="Container">

        <div class="col-sm-12 col-md-12 col-lg-12">
        <div class="row" id="resumePanel3">
            <div class="col-sm-6 col-md-4 col-lg-3">
                <h2 class="header">Accounts(INDIVIDUAL)</h2>
            </div>
        </div>

        <div class="row" id="resumeTable2">
            <div class="col-sm-8 col-md-8 col-lg-8 col-lg-offset-2">
            <div class="table-responsive">

                <table id ="resumeTable">
                  <tr class= "spacing">
                      <td class= "spacing"><span class="names">S No.</span></td>
                      <td class= "spacing"><span class="names">Email</span></td>        
                      <td class= "spacing"><span class="names">Resume Status</span></td>
                      <td class= "spacing"><span class="names">Action</span></td>
                  </tr>
                  <tr class= "spacing">
                    <td class= "spacing">1.</td>
                    <td class= "spacing">clarelim192@hotmail.com</td>
                    <td class= "spacing">Sent</td>      
                    <td class= "spacing">
                        <div class="buttonHolderRight">
                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                                <i class="glyphicon glyphicon-download-alt"></i>
                            </div>
                        </div>

                        <div class="buttonHolderMiddle">

                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                                <i class="glyphicon glyphicon-eye-open"></i>
                            </div>
                        </div>

                        <div class="buttonHolderLeft">

                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                             <i class="glyphicon glyphicon-open"></i>
                            </div>
                        </div>
                    </td>
                  </tr>
                  <tr class= "spacing">
                    <td class= "spacing">2.</td>
                    <td class= "spacing">irispyq@gmail.com</td>
                    <td class= "spacing">Sent</td>      
                    <td class= "spacing"></td>
                  </tr>
                  <tr id="spacing">
                    <td class ="spacing">3.</td>
                    <td class ="spacing">wun@gmail.com</td>
                    <td class ="spacing">Sent</td>      
                    <td class ="spacing"></td>
                  </tr>
                  <tr id="spacing">
                    <td class ="spacing">4.</td>
                    <td class ="spacing">syh96@gmail.com</td>
                    <td class ="spacing">Fail</td>      
                    <td class ="spacing"></td>
                  </tr>
                  <tr id="spacing">
                    <td class ="spacing">5.</td>
                    <td class ="spacing">cjp95@gmail.com</td>
                    <td class ="spacing">Fail</td>      
                    <td class ="spacing"></td>
                  </tr>
                  <tr id="spacing">
                      <td colspan="5"  align="center" valign="middle">
                          <nav>
                              <ul class="pagination">
                                <li>
                                  <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                  </a>
                                </li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                  <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                  </a>
                                </li>
                              </ul>
                            </nav>
                      </td>
                  </tr>
                </table>
            </div>


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

        </div>

    </div><!-- container-->![table][1]

Answer 1

在所有标签中尝试这样

<tr class= "spacing">
                        <td class= "spacing">1.</td>
                        <td class= "spacing">clarelim192@hotmail.com</td>
                        <td class= "spacing">Sent</td>      
                        <td class= "spacing">

                     <i class="glyphicon glyphicon-eye-open"></i>

                      <i class="glyphicon glyphicon-open"></i>
                      <i class="glyphicon glyphicon-download-alt"></i>

                        </td>
                      </tr>

Answer 2

使用float:left;在一行中显示图像。

.glyphicon{
    float:left;
}

我更新了您的fiddle。看一看。您也可以使用display:inline;代替float:left;。

Answer 3

请参阅此示例：https://jsfiddle.net/kevalbhatt18/7o3192rt/2/

的

的

.buttonHolderRight,.buttonHolderMiddle,.buttonHolderLeft{
   float:left;
   width: 30%;
}

的