- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我的自定义帖子类型在 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>
关于html - 将 Wordpress 帖子分页链接放在 Bootstrap 中行的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43309443/
我想在 scilab 中绘制 limacon,我有这个方程需要处理: 我知道r>0和l>0 当我编译以下代码时,我在第 5 行收到此错误: Inconsistent row/column dimens
我试图更好地了解行和行集在 PeopleCode 中的用途?我读完了PeopleBooks,但仍然觉得我没有很好的理解。我希望对这些与应用程序引擎程序相关的内容有更多的了解。也许通过一个例子可能会有所
我有 4 列的行,每列都有一个标题和一些文本。大多数列都有相似数量的文本,将其列中的按钮向下按以匹配其余列。但是,一列的文本较少,并且没有将按钮向下推得足够远。 有没有办法将按钮对齐到行的底部?我想实
我有这个模型 summary = models.TextField() 但我只想有 4 行和 15 列。 此外,如果我这样做,我是否需要重新安装数据库。 最佳答案 TextField
我想在 iPhone 中创建 SSL 服务器套接字的客户端,但我在 iPhone 中找不到任何 API。我有带密码的有效证书文件 最佳答案 你看过OpenSSL了吗? ? 关于iphone - iPh
For Each cell In sheets(1).Range("A50:A606") For Each cell2 In sheets(2).Range("EX2:ACB2") cell2.
这是我的矩阵 [,1] [,2] M -1 -5 T 8 -4 W -3 9 Th
我有一个全局char *在运行时,重新声明为指向声明为 way 的二维数组的指针。 : char (*A)[N][M] = malloc(sizeof(char[BUF_16][N][M])); 然后
我是一名优秀的程序员,十分优秀!