Question

我正在使用Wordpress事件主题，在单个事件页面上，我想在较小/纵向视口中显示主体副本上方的左侧边栏内容。相关网页是：http://staging.foxandmonkey.co.uk/event/brunch-808-uk-garage/

以下是主题的PHP：

global $tp_sidebar, $tp_content_class, $tp_title;
if ( $tp_sidebar ) {
$right_class = 'col-sm-7 col-sm-push-5';
$left_class = 'col-sm-5 col-sm-pull-7';
}
else {
$right_class = 'col-sm-8 col-sm-push-4';
$left_class = 'col-sm-4 col-sm-pull-8';
}
?>

<?php tribe_get_template_part( 'custom/wrapper-start' ); ?>

<div id="tribe-events-content" class="tribe-events-single vevent hentry">

<!-- Notices -->
<?php 
if ( function_exists('tribe_the_notices') ) {
    tribe_the_notices();
}
elseif ( function_exists('tribe_events_the_notices') ) {
    tribe_events_the_notices();
}
?>

<div class="events-single-right <?php echo esc_attr( $right_class ); ?>">

    <?php while ( have_posts() ) :  the_post(); ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

            <?php if ( !$tp_title ) : ?>
                <h2 class="entry-title">
                    <?php the_title() ?>
                </h2>
            <?php endif; ?>

            <!-- Event featured image, but exclude link -->
            <?php if(has_post_thumbnail()) : ?>
                <div class="tribe-events-event-image">
                    <?php the_post_thumbnail( 'large' ); ?>
                </div>
            <?php endif; ?>

            <!-- Event content -->
<?php do_action( 'tribe_events_single_event_before_the_content' ) ?>

<div class="tribe-events-single-event-description tribe-events-   content entry-content description">
                <?php the_content(); ?>
            </div>
            <!-- .tribe-events-single-event-description -->
            <?php do_action( 'tribe_events_single_event_after_the_content' ) ?>

        </div> <!-- #post-x -->
    <?php endwhile; ?>

</div>

<div class="events-single-left <?php echo esc_attr( $left_class ); ?>">

    <?php tribe_get_template_part( 'custom/cta' ); ?>

    <!-- Event meta -->
    <?php do_action( 'tribe_events_single_event_before_the_meta' ) ?>

    <?php do_action( 'tribe_events_single_event_meta_primary_section_start' ); ?>

    <?php tribe_get_template_part( 'modules/meta/details' ); ?>

    <?php do_action( 'tribe_events_single_event_meta_primary_section_end' ); ?>

    <?php tribe_get_template_part( 'modules/meta/venue' ); ?>

    <?php tribe_get_template_part( 'modules/meta/map' ); ?>

    <?php tribe_get_template_part( 'custom/schedule' ); ?>

    <?php tribe_get_template_part( 'custom/custom' ); ?>

    <?php 
    // Include organizer meta if appropriate
    if ( tribe_has_organizer() ) {
        tribe_get_template_part( 'modules/meta/organizer' );
    } 
    ?>

    </div>

页面没有侧边栏，所以我假设这部分是定义左右内容的部分：

$right_class = 'col-sm-8 col-sm-push-4';
$left_class = 'col-sm-4 col-sm-pull-8';

我是CSS和Bootstrap的新手，所以你能帮我设置一些自定义CSS来在移动和纵向平板电脑视图右侧显示左侧calss吗？这是当前在主题文件中的CSS：

#tribe-events-content.tribe-events-single {
background: white;
margin: 0 0 30px;
padding: 50px;
}
#tribe-events-content.tribe-events-single .events-single-left {
padding: 0;
margin-bottom: 25px;
}
@media (max-width: 767px) {
#tribe-events-content.tribe-events-single .events-single-left {
min-height: 200px !important;
 }
}
@media (min-width: 768px) {
#tribe-events-content.tribe-events-single .events-single-left {
border-right: 1px solid #3ec9ce;
 }
}
#tribe-events-content.tribe-events-single .events-single-right {
padding: 0;
}
@media (max-width: 767px) {
#tribe-events-content.tribe-events-single .events-single-right {
min-height: 200px !important;
 }
}

感谢你给我的任何建议！

Answer 1

目前，左侧和右侧部分正在向后渲染，因为右侧部分位于PHP页面生成的HTML左侧之前。左右类（你已经正确地认为是重要的）然后使用一些更高级的Bootstrap样式（包括推拉），以基本上重新排序部分，使左侧出现左侧，右侧出现对。很复杂！

为了完成你的要求，我建议大量简化。首先，您需要更改两个部分的PHP页面中的顺序。取右边的部分，即以<div class="events-single-right" ...开头的div，并将其及其内容移动到左侧部分（在这种情况下代码示例的最底部）。这可以更好地说明这个想法：

旧结构：

(other code)

<div class="events-single-right <?php echo esc_attr( $right_class ); ?>">
    (right div contents)
</div>

<div class="events-single-left <?php echo esc_attr( $left_class ); ?>">
    (left div contents)
</div>

新结构：

(other code)

<div class="events-single-left <?php echo esc_attr( $left_class ); ?>">
    (left div contents)
</div>

<div class="events-single-right <?php echo esc_attr( $right_class ); ?>">
    (right div contents)
</div>

基本上你只是交换两个块，所以左边的部分是第一个，因为这在逻辑上是你想要实现的。

完成后，修复这些课程。 Bootstrap的系统实际上非常简单。它们定义了4种不同的屏幕尺寸，移动，平板电脑肖像/小型，平板电脑风景/大型和桌面。它们分别对应于CSS类col-xs-...，col-sm-...，col-md-...和col-lg-...，至少对于列，这是您感兴趣的。

然后，

Bootstrap将容器的宽度（在本例中为页面宽度）分成12个不可见的列。然后，您可以通过给出要在CSS类中占用的这些列的数量来指定div的宽度。指定12表示div占据整个宽度，而指定6表示它仅占据宽度的一半（6/12）。

将这些放在一起，使用col-xs-6指示您的div在移动屏幕尺寸（-6）上查看时占据网页宽度的一半（-xs），而{{1这意味着你的div占据纵向平板电脑宽度的四分之一。您可以将多个类组合成一个div，以指定在屏幕大小增加时div的宽度如何变化。

Bootstrap也被设计为“移动优先”。这样做的结果是，如果您没有在较大的屏幕尺寸中明确给出div的宽度，Bootstrap会向后工作并假设您希望保持与较小屏幕尺寸相同的div宽度（列数）。此外，如果你没有指定任何类，div基本上默认为col-sm-3，这与上面的规则相结合意味着默认情况下div占用所有屏幕尺寸的整个宽度（12列）（更大的屏幕尺寸）所有人都看不起移动尺寸并复制它。）

将所有这些放在一起，您需要的课程如下：

col-xs-12

这会使左右两个部分在移动设备和人像平板电脑（$left_class = 'col-md-4'; $right_class = 'col-md-8';和xs）上占据整个宽度（因此垂直位于彼此之上），因为我们没有明确指定这些屏幕尺寸的任何类别，默认值始终从sm开始。然后我们指定col-xs-12和col-md-4，这意味着从横向平板电脑屏幕开始，尺寸更改使左侧部分占宽度的1/3，右侧部分占宽度的2/3 。桌面大小调整然后模仿这些维度，同样没有明确指定。

如果您想进一步改进，以便只有桌面屏幕并排使用两列，而在左上方的所有其他尺寸上，只需将这些类更改为col-md-8而不是{{1 }}

我希望这会让事情变得更加清晰，并实现你想要达到的目标。

Answer 2

如果将侧边栏div放在HTML中的主内容div之前，则不需要使用Bootstrap推送和拉取。然后随着视口变小，侧边栏自然会出现在主要内容之上，因为这是它们在HTML中出现的顺序。

所以：

切换侧边栏和内容的顺序
删除相应的col-sm-push-4和col-sm-pull-8类。

如何更改列显示顺序移动/平板电脑查看CSS Wordpress？

2 个答案: