Question

我有一个奇怪的问题，我无法得到包含2个链接和文本的最后一行显示为内联，而是包装。

<div class="row">
    <div class="col-md-12">
      <h3>Results</h3>
      <form action="/Search" class="form-inline" method="post">
        <table class="table table-striped" border="1">
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
            </tr>

            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td colspan="5">
                    <a href="#" data-pageindex="3" class="pager">[Previous]</a> 
Page 5 of 30 
<a href="#" data-pageindex="5" class="pager">[Next]</a>
                </td>
            </tr>
        </table>
       </form>
    </div>
</div>

我已经尝试过text-nowrap类，并尝试了许多CSS内联语句而没有任何运气。

如何让最后一个单元格显示在同一行上，例如：

[上一页]第5页，共30页[下一页]

代替： enter image description here

Answer 1

使用form-inline类将表单包装在表单标记中，然后使用form-group类包装div中的上一个和下一个锚点链接。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-12">
    <table class="table table-striped" border="1">
      <tbody>
        <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <th>Col 4</th>
          <th>Col 5</th>
        </tr>

        <tr>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <td colspan="5">
            <form class="form-inline">
              <div class="form-group">
                <a href="#" data-pageindex="3" class="pager">[Previous]</a>
              </div>
              Page 5 of 30
              <div class="form-group">
                <a href="#" data-pageindex="5" class="pager">[Next]</a>
              </div>
            </form>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

＆＃13;

但是，您也可以从锚标记中删除寻呼机类，以使其正常工作。

如果您需要实际的Bootstrap样式的寻呼机，则需要将它们与无序列表一起使用，如下所示：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
        <div class="col-md-12">
            <table class="table table-striped" border="1">
                <tbody><tr>
                    <th>Col 1</th>
                    <th>Col 2</th>
                    <th>Col 3</th>
                    <th>Col 4</th>
                    <th>Col 5</th>
                </tr>
    
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td colspan="5">
                      <nav>
                        <ul class="pager pull-left">
                          <li><a href="#">Previous</a></li>
                          Page X of Y
                          <li><a href="#">Next</a></li>
                        </ul>
                      </nav>
                    </td>
                </tr>
            </tbody></table>
        </div>
    </div>

＆＃13;

只有轻微的缺点才会让他们的行更宽一些。

Bootstrap 3在TD内显示链接和文本内联

1 个答案: