html - 将 Wordpress 帖子分页链接放在 Bootstrap 中行的底部-6ren

html - 将 Wordpress 帖子分页链接放在 Bootstrap 中行的底部

转载作者：太空宇宙更新时间：2023-11-04 08:52:53

我的自定义帖子类型在 Wordpress WP_Query 下有数字分页链接。但是它们出现在 Bootstrap row 中(就像一个额外的列)而不是在帖子下面。

使用 Bootstrap 3.3.7

如何将它们移动到新行的缩略图下方显示？

我不能将它们放在一个新的 行 中，因为那样我会在一行中有一行。我尝试创建一个新类并将其位置设置为绝对位置，但这也不起作用。

分页链接在循环内，因此它们必须在行内。

<div class="row">

        <?php
        $paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
        // WP_Query arguments
        $args = array(
            'post_type'              => array( 'video' ),
            'post_status'            => array( 'publish' ),
            'nopaging'               => false,
            'posts_per_page'         => 3,
            'paged' => $paged
        );

        // The Query
        $video = new WP_Query( $args );

        // The Loop
        if ( $video->have_posts() ) {
            while ( $video->have_posts() ) {
                $video->the_post(); ?>

                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <figure class="snip1567">
                        <img src="<?php the_post_thumbnail_url(); ?>" class="img-responsive" alt="<?php the_title(); ?>" />
                        <figcaption>
                            <h3>Graphic Design</h3>
                            <p><?php the_title(); ?></p>
                        </figcaption>
                        <div class="hover"></div><i class="fa fa-play-circle-o"></i>
                        <a href="<?php the_permalink(); ?>"></a>
                    </figure>
                </div>

            <?php } ?>

                <?php $big = 999999999; // need an unlikely integer

                echo paginate_links( array(
                    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
                    'format' => '?paged=%#%',
                    'current' => max( 1, get_query_var('paged') ),
                    'total' => $video->max_num_pages
                ) );
                ?>

        <?php } else {
            // no posts found
        }

        // Restore original Post Data
        wp_reset_postdata();
        ?>

CSS

/*
 * VIDEO THUMBNAIL STYLES
*/
.snip1567 {
    background-color: #000000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    color: #ffffff;
    display: inline-block;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    margin: 8px;
    overflow: hidden;
    position: relative;
    text-align: left;
    width: 100%;
}

.snip1567 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.snip1567 img {
    max-width: 100%;
    opacity: 0.75;
    position: relative;
    vertical-align: top;
}

.snip1567 figcaption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.snip1567 h3 {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    background-color: #000000;
    top: 0;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin: 0;
    padding: 10px 20px;
    position: absolute;
    width: 100%;
}

.snip1567 p {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 0px 20px;
    opacity: 0;
    text-align: right;
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

.snip1567 i {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 54px;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

.snip1567 .hover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    background-color: rgba(1, 205, 116, 0.7);
    display: flex;
    font-size: 65px;
    justify-content: center;
    opacity: 0;
}

.snip1567 a {
    left: 0;
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.snip1567:hover .hover,
.snip1567.hover .hover {
    opacity: 1;
}

.snip1567:hover p,
.snip1567.hover p {
    opacity: 1;
}

.snip1567:hover h3,
.snip1567.hover h3 {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}

.snip1567:hover i,
.snip1567.hover i {
    -webkit-transform: translate(-50%, -50%) scale(0.1);
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0;
}

/*
 * PAGINATE LINKS
*/
.page-numbers {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 2px 0 0;
    border: 1px solid #eee;
    line-height: 1;
    text-decoration: none;
    border-radius: 2px;
    font-weight: 600;
}
.page-numbers.current,
a.page-numbers:hover {
    background: #f9f9f9;
}

HTML 输出

<div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <figure class="snip1567">
                        <img src="http://localhost/technia/wp-content/uploads/2017/04/bb43432d-51b3-34c9-a4dc-3c6808e39651.jpg" class="img-responsive" alt="How budget airlines work">
                        <figcaption>
                            <h3>Graphic Design</h3>
                            <p>How budget airlines work</p>
                        </figcaption>
                        <div class="hover"></div><i class="fa fa-play-circle-o"></i>
                        <a href="http://localhost/technia/video/how-budget-airlines-work/"></a>
                    </figure>
                </div>

                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <figure class="snip1567">
                        <img src="http://localhost/technia/wp-content/uploads/2017/03/5e47222d-3546-3958-acbd-c28df85b1c06.jpg" class="img-responsive" alt="Pompey">
                        <figcaption>
                            <h3>Graphic Design</h3>
                            <p>Pompey</p>
                        </figcaption>
                        <div class="hover"></div><i class="fa fa-play-circle-o"></i>
                        <a href="http://localhost/technia/video/pompey/"></a>
                    </figure>
                </div>

                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <figure class="snip1567">
                        <img src="http://localhost/technia/wp-content/uploads/2017/04/28b70c69-3f98-3fa3-b4ca-59acde889971.jpg" class="img-responsive" alt="Why are trains so expensive">
                        <figcaption>
                            <h3>Graphic Design</h3>
                            <p>Why are trains so expensive</p>
                        </figcaption>
                        <div class="hover"></div><i class="fa fa-play-circle-o"></i>
                        <a href="http://localhost/technia/video/why-are-trains-so-expensive/"></a>
                    </figure>
                </div>


                <span class="page-numbers current">1</span>
                 <a class="page-numbers" href="http://localhost/technia/videos/page/2/">2</a>
                 <a class="next page-numbers" href="http://localhost/technia/videos/page/2/">Next »</a>

 </div>

最佳答案

将 .page_numbers 放在一个带有 id link_container 和样式的 div 中。应用明确的修复。例子

#link_container{
clear: both;
padding-left: 25px;
}

下面的片段

/*
 * VIDEO THUMBNAIL STYLES
*/

.snip1567 {
  background-color: #000000;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  display: inline-block;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  margin: 8px;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 100%;
}

.snip1567 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.snip1567 img {
  max-width: 100%;
  opacity: 0.75;
  position: relative;
  vertical-align: top;
}

.snip1567 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1567 h3 {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  background-color: #000000;
  top: 0;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin: 0;
  padding: 10px 20px;
  position: absolute;
  width: 100%;
}

.snip1567 p {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 0px 20px;
  opacity: 0;
  text-align: right;
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.snip1567 i {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 54px;
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.snip1567 .hover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  background-color: rgba(1, 205, 116, 0.7);
  display: flex;
  font-size: 65px;
  justify-content: center;
  opacity: 0;
}

.snip1567 a {
  left: 0;
  bottom: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.snip1567:hover .hover,
.snip1567.hover .hover {
  opacity: 1;
}

.snip1567:hover p,
.snip1567.hover p {
  opacity: 1;
}

.snip1567:hover h3,
.snip1567.hover h3 {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}

.snip1567:hover i,
.snip1567.hover i {
  -webkit-transform: translate(-50%, -50%) scale(0.1);
  transform: translate(-50%, -50%) scale(0.1);
  opacity: 0;
}


/*
 * PAGINATE LINKS
*/

.page-numbers {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 2px 0 0;
  border: 1px solid #eee;
  line-height: 1;
  text-decoration: none;
  border-radius: 2px;
  font-weight: 600;
}

.page-numbers.current,
a.page-numbers:hover {
  background: #f9f9f9;
}

#link_container {
  clear: both;
  padding-left: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <figure class="snip1567">
      <img src="https://www.nature.org/cs/groups/webcontent/@photopublic/documents/media/nick-hall-sichuan-province-537.jpg" class="img-responsive" alt="How budget airlines work">
      <figcaption>
        <h3>Graphic Design</h3>
        <p>How budget airlines work</p>
      </figcaption>
      <div class="hover"></div><i class="fa fa-play-circle-o"></i>
      <a href="http://localhost/technia/video/how-budget-airlines-work/"></a>
    </figure>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <figure class="snip1567">
      <img src="https://www.nature.org/cs/groups/webcontent/@photopublic/documents/media/nick-hall-sichuan-province-537.jpg" class="img-responsive" alt="Pompey">
      <figcaption>
        <h3>Graphic Design</h3>
        <p>Pompey</p>
      </figcaption>
      <div class="hover"></div><i class="fa fa-play-circle-o"></i>
      <a href="http://localhost/technia/video/pompey/"></a>
    </figure>
  </div>

  <!--<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <a class="thumbnail" href="">
                        <div class="video-img" id="overlay">
                            <i class="fa fa-play-circle-o fa-4x"></i>
                            <img class="img-responsive overlay" alt="" src="" />
                            <span></span>
                        </div>
                        <div class="caption"></div>
                    </a>
                </div>-->

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <figure class="snip1567">
      <img src="https://www.nature.org/cs/groups/webcontent/@photopublic/documents/media/nick-hall-sichuan-province-537.jpg" class="img-responsive" alt="Why are trains so expensive">
      <figcaption>
        <h3>Graphic Design</h3>
        <p>Why are trains so expensive</p>
      </figcaption>
      <div class="hover"></div><i class="fa fa-play-circle-o"></i>
      <a href="http://localhost/technia/video/why-are-trains-so-expensive/"></a>
    </figure>
  </div>

  <div id="link_container">
    <span class="page-numbers current">1</span>
    <a class="page-numbers" href="http://localhost/technia/videos/page/2/">2</a>
    <a class="next page-numbers" href="http://localhost/technia/videos/page/2/">Next »</a>
    <div>

    </div>

click her for demo with resizable window

关于html - 将 Wordpress 帖子分页链接放在 Bootstrap 中行的底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43309443/

文章推荐： python - 返回参数在 Python 中抛出异常

文章推荐：尝试将读取的数据写入文件时出现 curl 写入错误

文章推荐： c - 这个程序中 sockaddr_in 的目的是什么？

cocoa - 在 Cocoa 中，将私有(private) API 放在 .m 文件中，将公共(public) API 放在 .h 文件中，这是一个好习惯吗？
我当前项目中的许多类都有几个只能从类本身内部调用的属性和方法。此外，根据类(class)的当前状态，它们可能会扰乱类(class)的工作。目前，所有这些接口(interface)都在 .h 文件的主
angular - 使用 ngbTabSet 将 nav-pills 放在 card-header 中，将 tab-content 放在 card-body 中
我想使用ngbTabSet将nav-pills in card-header 和tab-content in card-body。但我不知道该怎么做。这是我尝试实现的示例(使用 bootstrap.
cocoa - 放在 Dock 图标上
我正在浏览文档以查找如何允许放置在停靠栏图标上。据我所知，建议您使用 LSItemContentTypes，因为 CFBundleTypeOSTypes 已弃用。但是，我无法让 LSItemConte
javascript 放在 head 前面？
我正在尝试在书签中使用 jquery UI 作为 slider 。并且 jquery ui 要求在普通 jquery 文件之后包含该文件。所以到目前为止我所尝试的只是将脚本附加到 header ，同
javascript - 放在 map 上之前的谷歌地图圆针
您好，我尝试了广泛的谷歌搜索，但似乎没有任何帮助。这是我的场景: 公司 Logo 存储在外部域/网址(矩形)中。带有谷歌地图的 Ionic 应用程序，将这些 Logo 作为标记放置在 map 上。
c# - 你喜欢让你把 "then"放在 "if"之前的语言吗？
我今天在阅读我的一些 C# 代码时发现了这一行: if (ProgenyList.ItemContainerGenerator.Status != System.Windows.Controls.Pr
programming-languages - 为什么很多编程语言把类型*放在*变量名之后？
我刚遇到this question在 Go FAQ 中，它让我想起了困扰我一段时间的事情。不幸的是，我真的不明白答案是什么。似乎几乎所有非 C 类语言都将类型放在变量名之后，如下所示: var :
html - 我可以将放在 标签内吗？
这是有效的 HTML 吗？最佳答案作为元素可以包含 phrasing content ，以及属于该组，则有效。从语义上(并且具有一些常识)，如果唯一的内容是，不;如果它同时包含文本和图像

html - 我可以将放在 标签内吗？
这是有效的 HTML 吗？最佳答案作为元素可以包含 phrasing content ，以及属于该组，则有效。从语义上(并且具有一些常识)，如果唯一的内容是，不;如果它同时包含文本和图像

antlr - 何时将美元符号 $ 放在 ANTLR 中对符号的引用处？
我有两本 T.Parr 写的关于 ANTLR 的书，我到处都看到美元符号和符号的引用。它也对我有用: term : IDENT -> { new TokenNode($IDENT) }; 或更复杂的东

iphone - UISegmentedControl 放在 tableView 标题中时行为异常
我在实现段控制时遇到了一些问题。因为我希望它是一个固定的标题，所以当我滚动时我总是可以看到它，我已经在 - (UIView *)tableView:(UITableView *)tableView v

ios - 为什么我的 UIImageView 放在 Storyboard上时会模糊？
我有一个 20x36px (10x18pt) 的箭头图像，当我选择一个 UIImageView 时，将它拖到我的 View Controller 上然后设置图像，它总是模糊的。我只在我的项目中包含 @

javascript - 悬停时如何将背景 gif 放在链接中
How can I put background image when I hover a link Insert Bg in this a when hov

javascript - 放在 div 前面，但在第一个元素之后
我需要在我的 .container 中添加(最新的第一个)新分区，但在 .controls (按钮)之后。可能吗？注意:添加新的分区来保存按钮下方的前置控件对我来说不是一个选择。 HTML 需要保持

html - 如何将放在标签内？
将 table 放在 a 标签内是否是一个好的解决方案？为什么链接在包装表时不起作用？ My place
html - 我如何将“放在 HTML 属性值中
我希望有以下内容: Catch me in the rice. 很明显，浏览器无法很好地呈现这一点。请向我提供有关“我必须使用什么转义序列或编码”的信息？最佳答案改用"。关于html - 我如何

javascript - 将放在
中的更好做法是什么
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 7 年前。 Improve
无法将内核的原型(prototype)放在 header 中
io.cuh: #ifndef IO_CUH #define IO_CUH #include typedef struct{ unsigned width; unsigned hei

html -
放在
里面好不好
我尝试过表格设计。我的问题如下图所示。我只想在 .total_amt_tr 类上设置 border 或 hr。我在 tr 中尝试了带有 .chkout_hr 类的 hr 标签，但它没有用。 bor
html - 可以将
放在中吗
这个问题在这里已经有了答案: 关闭 11 年前。

太空宇宙

个人简介
我是一名优秀的程序员,十分优秀！

作者热门文章

android - 多次调用 OnPrimaryClipChangedListener

android - 无法更新 RecyclerView 中的 TextView 字段

android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0

android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色

滴滴打车优惠券免费领取

全站热门文章

.NET各版本贡献者列表

『玩转Streamlit』--数据展示组件

cmu15545-数据访问方式：B+树（B+Tree）

实战：Mailivery模拟登录

.NET9使用Scalar替代Swagger

.NET9发布性能提升、AI支持与全方位改进

Java灵魂拷问13个为什么，你都会哪些？

Spring-Event入门实践及执行原理

[这可能是最好的Spring教程！]Maven的模块管理——如何拆分大项目并且用parent继承保证代码的简介性

不当愣头青、聊聊软件架构中的那些惯用的保命手段

Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
 广告合作:1813099741@qq.com 6ren.com

首页

博学

6Ren·AI

商城

html - 将 Wordpress 帖子分页链接放在 Bootstrap 中行的底部