Question

I've got a site that I have built, I've got all the elements set up on one page ready to add in to the different pages on my site. When I come to add in the videos to the archive page, whatever I do, the columns always sit underneath each other, not side by side like they should do on my example page.

Example page is

https://sdltrefunds.ctatax.uk.com/test/

I've used the code on the archive.php page many a time, on about 4 sites and it works fine, but just not on this site.

The only thing I can think of is that I am using a new plugin called 'Custom post type UI' instead of 'Types', not sure if that is affecting it.

I've also tried using the following:

.post-type-archive-videos article { width:100%!important;}

and I've also tried using a clear after the article.

Interestingly when I remove the_excerpt or posted_on I get strange results.

the columns all change.

Can anyone please help? The page is here:

https://sdltrefunds.ctatax.uk.com/archive/video

Code on the page is:

<?php
/**
 * @package WordPress
 * @subpackage HTML5-Reset-WordPress-Theme
 * @since HTML5 Reset 2.0
 */
 get_header(); ?>

<div class="wrapper">
    <div class="parallax two">
    </div>
</div>
<div class="wrapper">
    <div class="inner">
        <h1>Videos</h1>
        <div class="row">
            <?php if (have_posts()) : ?>

            <?php while (have_posts()) : the_post(); ?>

            <article <?php post_class() ?>>
                <div class="col-xs-12 col-sm-6 col-md-12">
                    <h3><a href="<?php the_permalink() ?>">
                            <?php the_title(); ?></a></h3>
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="<?php the_field('video_link'); ?>" />" allowfullscreen></iframe>
                    </div>
                    <p>
                        <?php the_excerpt(); ?>
                    </p>
                    <p>
                        <?php posted_on(); ?>
                    </p>
                    <p><a href="<?php the_permalink() ?>" class="btn btn-default" role="button">Read more</a></p>
                </div>
            </article>

            <?php endwhile; ?>

            <?php else : ?>

            <?php endif; ?>

        </div>
    </div>
</div>

<?php get_footer(); ?>

Answer 1

如果可以，请尝试在wordpress之外运行页面，然后比较结果。这样，您可以查看html / css内部是否存在问题，或者是否是wordpress所添加的东西。我建议仅将WAMP作为常规html / css实现在WAMP中运行，而无需任何wordpress PHP代码。

Answer 2

Please use this edit code bootstrap columns 

<article <?php post_class() ?>>
     <div class="your columns css like col-md-6 ">
     // your code post code
      </div>
 </article >


  TO


<div class="your columns css like col-md-6">
   <article <?php post_class() ?>>
   // your code post code
   </article >
</div>

Answer 3

我不太了解，但是Divi与Bootstrap不兼容。比您可以使用这样的表：

<div id="tableWraper">
<table style="width: 100%;" border="1">
<tbody>
<tr>
<th style="width: 64.6059%;">Hallo</th>
<th style="width: 30.3941%;">Hallo</th>
</tr>
<tr>
<td style="width: 64.6059%;">Hallo</td>
<td style="width: 30.3941%;">Hallo</td>

</tr>
</tbody>
</table>

https://toolset.com/forums/topic/archive-page-layout/

Problems with bootstrap columns on Wordpress archive page

3 个答案: