列错误与文本＆amp; Bootstrap中的图像

时间：2016-09-03 11:11:36

标签： javascript jquery css twitter-bootstrap

从附带的屏幕截图中可以看出，如果第一列的文字多于第二列，则会导致视觉故障。

如何在Bootstrap中解决此问题？

演示： https://jsfiddle.net/oLderkuo/

enter image description here 

1>  class tsp   size(24):
1>      +---
1>   0  | x1
1>   4  | x5
1>   8  | x10
1>  16  | p3
1>      | <alignment member> (size=4)
1>      +---

CSS：

<div class="container">

    <div class="portfolio-gallery row">

        <div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
            <span class='sub-gallery-icon'>
                <a href='#' >
                    <img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
                </a>
            </span>
            <span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. 
            </span>
        </div>

        <div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
            <span class='sub-gallery-icon'>
                <a href='#' >
                    <img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
                </a>
            </span>
            <span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            </span>
        </div>

        <div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
            <span class='sub-gallery-icon'>
                <a href='#' >
                    <img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
                </a>
            </span>
            <span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. 
            </span>
        </div>

</div>

2 个答案:

答案 0 :(得分：1)

您需要将文字换成<p>标记并将其宽度设置为img宽度 请参阅下面的演示：

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
  margin: 10px;
}
p {
  width: 300px;
}
<div class="container">

  <div class="portfolio-gallery row">

    <div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
      <span class='sub-gallery-icon'>
				<a href='#' >
					<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
				</a>
			</span>
      <span class='wp-caption-text gallery-caption'><br />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. 
      </p></span>
    </div>

    <div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
      <span class='sub-gallery-icon'>
				<a href='#' >
					<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
				</a>
			</span>
      <span class='wp-caption-text gallery-caption'><br /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </p></span>
    </div>

    <div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
      <span class='sub-gallery-icon'>
				<a href='#' >
					<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
				</a>
			</span>
      <span class='wp-caption-text gallery-caption'><br /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. 
      </p></span>
    </div>

  </div>

答案 1 :(得分：0)

这是我解决这个故障的代码。

您会在下面看到我有2个条件声明来涵盖大/中等大小＆amp;小/ x小尺寸。

<?php
/*
Template Name: Gallery
*/
?>

<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">

<h2><?php the_title(); ?></h2>

<?php the_content(); ?>

<div class="portfolio-gallery row">

<?php
$the_id = $post->ID;

$args = array(
'posts_per_page' => 50,
'offset'        => 0,
'title_li'     => '',
'post_parent'  => $the_id,
'post_type'    => 'page',
'order_by' => 'menu_order',
);

$pages = get_posts( $args );

$output = '';

$i = 0;

foreach($pages as $value){

    $thumb = get_the_post_thumbnail( $value->ID, 'thumbnail', $attr = 'class=gallery-thumb-img' );
    $tcopy = get_post_meta($value->ID, 'gallery_short_description', true);
    $output .= "<div class='gallery-item col-xs-12 col-sm-6 col-md-4'><span class='sub-gallery-icon'>";
    $output .= "<a href='" . $value->post_name . "' >" . $thumb . "</a></span>";
    $output .= "<span class='wp-caption-text gallery-caption'><a href='" . $value->post_name . "' >" .  $value->post_title . "</a><br />";
    $output .= " " . $tcopy . "</span></div>";

    if ($i == 2 || $i == 5 || $i == 8 || $i == 11) {
        $output .= '<div class="clearfix visible-lg"></div><div class="clearfix visible-md"></div>';
    }

    if ($i == 1 || $i == 3 || $i == 7 || $i == 9 || $i == 11 || $i == 13) {
        $output .= '<div class="clearfix visible-sm"></div><div class="clearfix visible-xs"></div>';
    }

    $i++;
} 

echo $output;
?>


<?php echo do_shortcode('[gallery columns="0" size="thumbnail" link="file" itemtag="div" icontag="span" captiontag="span"]'); ?>

</div>

</div>

<br class="clear" />

<?php endwhile; endif; ?>

<?php get_footer(); ?>
相关问题
最新问题