Question

第一篇文章 - 温柔：）

我遇到了Bootstrap中行高的问题（我认为）。我是Bootstrap的新手，我正在尝试对我的Wordpress网站进行一些基本的编辑，并且真的想要进一步了解我的知识。以前我在页面上平均分配了4个项目，看起来很棒。好吧，我已经添加了第五个项目，它已被删除到前四个下面的下一行，但在页面上不够低，并阻止原始四个项目中的一个的内容。

如何调整违规行的高度以使底部项目足够低以容纳上排？

链接到实际页面：HERE 请参阅下面的图片和代码。

Offending item

整个页面的HTML：

<?php
/*
template name:Home Page
*/
get_header();
?>
<!-- banner starts -->
<div class="banner">
  <div data-ride="carousel" class="carousel slide" id="carousel-example-captions">
      <ol class="carousel-indicators">
        <li class="" data-slide-to="0" data-target="#carousel-example-captions"></li>
        <li data-slide-to="1" data-target="#carousel-example-captions" class="active"></li>
        <li data-slide-to="2" data-target="#carousel-example-captions"></li>
      </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
  <?php $slides = get_field('slides','4');
  if(is_array($slides) and count($slides)>0){
  $num=0;
                  foreach($slides as $slides_val) {?>
    <div class="item <?php if($num==0) echo "active"; ?>">
  <img src="<?php echo $slides_val['slide_image']['url']; ?>" alt="900x500" data-src="holder.js/900x500/auto/#777:#777" data-holder-rendered="true">
  <div class="carousel-caption">
    <div class="banner-heading">
    <span><?php echo $slides_val['slide_content_heading']; ?></span>
    </div>
    <?php echo $slides_val['slide_content']; ?>
  <!--  <a href="<?php// echo get_site_url();?>/contact">Contact Us</a>-->
  </div>
</div>
<?php $num++; } }?>

  </div>

  <!-- Controls -->
      <a data-slide="prev" role="button" href="#carousel-example-captions" class="left carousel-control">
        <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a data-slide="next" role="button" href="#carousel-example-captions" class="right carousel-control">
        <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</div>
<!-- banner ends --> 
<!-- content starts -->
<div class="content">
<div class="process-section">
<div class="container">
    <div class="row">
      <div class="process-heading">Our Process</div>
      <div class="process-fillers-section">
        <ul>
        <?php
                                    global $post,$paged;

                                    $args = array( 
                                        'post_type'=>'process',
                                        'orderby'=>  'post_date',                                       
                                        'order' => 'DESC'
                                            );
                                $wp_query= new WP_Query($args);
                         $no_of_posts=$wp_query->found_posts;

                                while ($wp_query->have_posts()):$wp_query->the_post();


                             $src= wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');

                                ?>

          <li class="col-sm-4 col-md-4 col-lg-4">
            <img src="<?php echo $src[0];?>" alt="" />
            <div class="process-inner">
            <div class="filler-title"><?php the_title(); ?></div>
            <?php the_content(); ?>
           <!-- <a href="<?php //the_permalink();?>">Read More</a>-->
            </div>
          </li>


          <?php
   endwhile;
?>

        </ul>
      </div>
    </div>
  </div>
  </div>
  <?php include('vip.php');?>
  <div class="service-section">
    <div class="container">
      <div class="row">
      <div class="process-heading">Our Services</div>
        <div class="process-fillers-section">
          <ul>
           <?php
                                    global $post,$paged;

                                    $args = array( 
                                        'post_type'=>'services', 
                                        'order' => 'ASC'
                                            );
                                $wp_query= new WP_Query($args);
                         $no_of_posts=$wp_query->found_posts;

                                while ($wp_query->have_posts()):$wp_query->the_post();


                             $src= wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');

                                ?>
            <li class="col-sm-3 col-md-3 col-lg-3">
              <div class="process-fillers-image-section">

                <img src="<?php echo $src[0];?>" alt="" />

                <div class="process-category"><?php the_title(); ?> </div>
              </div>
              <p><?php the_excerpt(); ?> </p>

              <a href="<?php the_permalink();?>">Read More</a>
            </li>
<?php


                                endwhile;
                                ?>



          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="instagram-section">
  <div class="container">
      <div class="row">
   <div class="process-heading">
<div><img src="<?php bloginfo('template_url');?>/images/instagram-icon.png" alt="" /></div>
   @H2Htpe</div>
 <?php  echo do_shortcode('[instagram]'); ?>

  </div>
  </div>
  </div>
</div>
<!-- content ends --> 
<?php get_footer('footer'); ?>

Bootstrap行高选项

0 个答案: