我正在使用bootstrap 3分页。那里没有问题。现在,客户希望在分页左侧添加一个跳转到页面的功能(请参见下面的模型图像和html使其看起来像这样)。当我添加跳转项以使其正确放置时,它给了我合适的位置。我已经尝试过使用position:relative的整体div,并使用position:absolute进行跳转和分页。我试过了仅具有跳转和不同位置的div。我最接近的是将分页功能添加到跳转功能。这仅适用于标签,否则它将移至分页符的右侧。 (对不起,这里的格式不太习惯)

由于某种原因,如果我删除了标签,我将无法正确设置样式(删除悬停等),并将其放置在分页左侧。

当我知道我缺少某些东西时,这完全使我感到沮丧。

我进行了搜索,但无济于事地读了一堆物品。任何帮助,将不胜感激。

这是样机和html。我使用内联样式只是为了快速查看。

mockup

<ul class="pagination pagination-sm pull-right">
  <li class="form-group input-group-sm"><a style="border:none;margin-top:-10px;">Go to page <input size="4" placeholder="page #"></input><button class="btn btn-primary btn-xs>Go</button></a></li>
  <li><a href="#">&laquo;</a></li>
  <li class="active"><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="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li><a href="#">9</a></li>
</ul>

最佳答案

顺便说一句,您的代码有一些错误。但是除此之外,由于存在许多样式问题,因此请勿将表单组放在同一个分页中。我认为在分页之外在div中使用go 部分更容易。

http://www.bootply.com/8RxnexxEtD

删除边距并将显示设置为行内,就一切就绪。

关于html - 在Bootstrap 3分页和样式问题中添加跳转到页面的链接,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43681960/

10-10 08:57
查看更多