Question

如附图所示，图像与菜单栏之间存在间隙。这是我从头开始在Wordpress中开发的主题。我所有的Carousel内容都在div

之内

    <div id="awesome-carousel" class="carousel slide" data-ride="carousel">

    </div>

My css is 

    .carousel { background: #000; }
    .carousel .item { height: 800px; overflow: hidden; }
    .carousel .item img { width: 100%; height: auto; margin-top: -0%; }
    .carousel-caption a { color: #fff; }

（1）如何消除差距？（2）然后我的图像没有被剪裁在底部，我怎样才能将整个图像包含在该区域内？我在page-home.php中的完整代码是

<?php get_header(); ?> 
<div class = "container-fluid" style="overflow-y: auto">   
  <div class="row"> 
    <div id="awesome-carousel" class="carousel slide" data-ride="carousel">

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">

            <?php 

                $args_cat = array(
                    'include' => '18, 19, 22'
                );

                $categories = get_categories($args_cat);
                $count = 0;
                $bullets = '';
                foreach($categories as $category):

                    $args = array( 
                        'type' => 'post',
                        'posts_per_page' => 1,
                        'category__in' => $category->term_id,

                    );

                    $lastBlog = new WP_Query( $args ); 

                    if( $lastBlog->have_posts() ):

                        while( $lastBlog->have_posts() ): $lastBlog->the_post(); ?>

                            <div class="item <?php if($count == 0): echo 'active'; endif; ?>">
                               <?php the_post_thumbnail('full'); ?>
                               <div class="carousel-caption">
                                  <?php the_title( sprintf('<h1 class="entry-title"><a href="%s">', esc_url( get_permalink() ) ),'</a></h1>' ); ?>
                                                          <small><?php the_category(' '); ?></small>
                               </div>
                            </div>

                            <?php $bullets .= '<li data-target="#awesome-carousel" data-slide-to="'.$count.'" class="'; ?>
                            <?php if($count == 0): $bullets .='active'; endif; ?>

                            <?php  $bullets .= '"></li>'; ?>

                        <?php endwhile;

                    endif;

                    wp_reset_postdata();

                $count++;

                endforeach;

            ?>

            <!-- Indicators -->
              <ol class="carousel-indicators">
                <?php echo $bullets; ?>
              </ol>

          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#awesome-carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#awesome-carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
    </div>
   </div >
   <!-- This is for Welcome Message -->
   <div class="row welcome">
    <h1>Welcome to MyanmarTourism</h1>
    <p>Wwer eree ere ae llji er we lkjj ewer  jlkjkj erw jkljer lkjkje werewer wkerkjkl. We reakl lkjle aere ar akljiu are jearear lkljkjare. Jk are lkjklul kljrea elkjare lj. He ioierwer sdfsdf sdfeiuit kare adfkjkjl. Wer kjljser sejrlj ekrjkjsfiu ekrjlkejk.</p>
   </div>   

</div>   

<?php get_footer(); ?>

由于

Answer 1

不确定我做了什么才有意义。但它的确有效。我添加了

.carousel_pos {
    position: relative;
    top: -20px;
}

然后将该属性添加到

<div class = "container-fluid  carousel_pos" style="overflow-y: auto">  

</div>

然后它向上移动并触摸顶部菜单。感谢

在Wordpress中设置Bootstrap Carousel图像

1 个答案: