gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 08:52:53 25 4
gpt4 key购买 nike

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

使用 Bootstrap 3.3.7

enter image description here

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

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

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

<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/

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