css - 使用 Wordpress 预览图像和 Bootstrap 换行

标签 css wordpress twitter-bootstrap line-breaks

我目前正在使用 bootstrap 开发一个 wordpress 主题,但我不知道如何在移动设备 View 中为我的帖子设置换行符。 我想在预览图像的右侧至少有 4-5 个单词(目前它甚至在右侧显示单个单词,这看起来很傻) Line Breaks

我的首页代码如下所示:

<div class="content">

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

      <div class="row"><!-- Row Start -->

        <div class="col-xs-12">

          <h1><?php the_title(); ?></h1>
        </div>
        <div class="col-xs-12">

          <?php if ( has_post_thumbnail() )
          echo '<div class="post_thumb">' . get_the_post_thumbnail(null, 'medium') . '</div>';
          ?>
          <?php the_excerpt(); ?>
          <a href="<?php the_permalink(); ?>">Weiter zum kompletten Beitrag</a>
        </div>
      </div>


      <div class="row trenner">
        <div class="col-xs-12"><hr></div>
      </div>

    <?php endwhile; ?>
  <?php endif; ?>

</div>

谢谢!

最佳答案

您可以采用两种方法,第一种是根据您的需要减小图像宽度,您的内容将自动显示在您想要的位置。或者您可以添加全宽图像,所有内容都将位于缩略图下方。为此,您必须在给定样式下应用此样式。

.post_thumb {
display: block;
text-align: center;
}

现在由您决定,哪个适合您。

关于css - 使用 Wordpress 预览图像和 Bootstrap 换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36934418/

相关文章:

jquery - 为什么我必须使用 $ ('#id' )[0].srollHeight 而不是 $ ('#id' ).srollHeight

javascript - JQuery/JS -- 在 <pre>/<code> 中的 span 后删除换行符

html - 如何在 wordpress 网站上将 3 个服务框居中

php - 如何限制 woocommerce 中相关产品的标题长度

javascript - Bootstrap 弹出窗口不保存复选框

css - 如何在 Bootstrap 中使用 CSS 在 nav-brand 类中加载 Logo 并使其居中?

javascript - 为什么我的代码 (jQuery) 没有响应?目标 : Sticky header

php - Wordpress ACF 字段到样式表

IE、Firefox 和 Chrome (wordpress) 之间的 CSS 兼容性

html - Bootstrap : responsive div in between two fixed div elements