html - 在 Wordpress 中设置 Bootstrap Carousel 图像

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>

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