在 Wordpress 中设置引导轮播图像答案

【问题标题】：Setting Bootstrap Carousel image in Wordpress在 Wordpress 中设置引导轮播图像
【发布时间】：2016-02-29 17:38:03
【问题描述】：

如附图所示，图片与菜单栏之间有空隙。这是我从零开始在 Wordpress 中开发的主题。我所有的轮播内容都在这个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(); ?>

谢谢

【问题讨论】：

jsfiddle 同样有用。谢谢。
因为我是用 Wordpress 开发的。我很难加载到 jsfiddle 中。
我假设您将每张幻灯片的 item 图像直接放入 html 代码。尽管您还没有完全粘贴代码。在这种情况下，我建议您将项目图像应用为背景，例如将item1、item2 等应用于每张幻灯片，并为每一张幻灯片添加 css background-image 属性。
@DebRaj;我已经添加了代码。
尝试设置margin和padding为0

标签： html css wordpress twitter-bootstrap carousel

【解决方案1】：

不确定我所做的是否有意义。但它有效。我加了

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

然后把这些属性放到

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

</div>

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

【讨论】：