Bootstrap到wordpress不会正确显示图像

时间:2016-07-15 17:21:20

标签: php html css wordpress twitter-bootstrap

我正在尝试将Bootstrap主题转换为WordPress主题,WordPress不会显示图像。我做了一些屏幕截图,左边显示了Bootstrap中的主题,右边显示了WordPress中的主题。

Bootstrap to WordPress

这是我在WordPress中使用图像容器的代码我不知道我做错了什么我已经尝试了所有内容而且没有任何作用。

<div class="container-fluid">
  <div class="row" data-fluid=".fluidHeigt" data-float="true">
    <div class="col-sm-5 imageCol">
      <div class="image fluidHeigt" style="background-image:url(<?php echo get_template_directory_uri();?>/img/img-our_impact.jpg)">
        <img src="<?php echo get_template_directory_uri();?>/img/img-our_impact.jpg" alt="" class="img-responsive visible-xs" />
          </div>
            </div>

我尝试将class="img-responsive visible-xs"更改为class="img-responsive.visible-xs",我明白了:

second image

Bootstrap和WordPress的样式都是相同的,所以我排除了样式代码作为问题的原因,我也注意到Bootstrap主题在标记样式min-height:799px;之后自动生成此代码,同时WordPress主题没有产生。

请有人帮助我,如果您需要更多信息来解决这个问题,请向我致谢。

2 个答案:

答案 0 :(得分:0)

.visible-xs仅在超小型设备上显示图像。试着说:

 <img src="<?php echo get_template_directory_uri();?>/img/img-our_impact.jpg"   alt="" class="img-responsive" />

答案 1 :(得分:0)

我检查并看到你的Wordpress主题正在加载jQuery。如果您没有看到它,可以将它放在functions.php文件中以使其加载:

function my_init() {
    if (!is_admin()) {
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');