如何将引导网格与滑块系统一起使用答案

【问题标题】：How to use bootstrap grid with system for slider如何将引导网格与滑块系统一起使用
【发布时间】：2014-09-24 11:00:36
【问题描述】：

我需要在 Home 页面上附加滑块。但是该滑块应该根据 Bootstrap 工作。

我的code 滑块：

<div class="row">
<div class="flexslider flexslider-7-<?php echo $blocks['bannerslider_id'] ?> col-md-4 col-md-offset-4 "  >
    <ul class="slides"> 
    <?php foreach ($banners as $banner): ?>
            <li>
                <a href="<?php echo $banner['click_url']?>" target="<?php echo $this->getTarget($banner['tartget'])?>" onclick="bannerClicks('<?php echo $banner['banner_id'] ?>','<?php echo $blocks['bannerslider_id'] ?>')" style="display:block"><img alt="<?php echo $banner['image_alt'];?>" src="<?php echo $this->getBannerImage($banner['image']); ?>"/></a>
            </li>
    <?php endforeach; ?>        
    <!-- items mirrored twice, total of 12 -->
    </ul>
</div>
</div>

我想让这个响应式。

但在它之后，反之亦然。它的行为与我的预期完全相反

我需要知道一个使用 Bootstrap 的滑块示例以及我应该在此代码中做哪些更改以使其响应？

【问题讨论】：

这段代码有效吗？你能给我看一个关于Bootply没有PHP的例子吗..

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

你可以尝试基于bootstraps轮播插件：

以下是在this example的基础上稍作修改

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <?php foreach ($banners as $banner): ?>
        <div class="item active">
          <img alt="<?php echo $banner['image_alt'];?>" src="<?php echo $this->getBannerImage($banner['image']); ?>"/>
          <div class="carousel-caption">
            <?php echo "some caption"; ?>
          </div>
        </div>
    <?php endforeach; ?> 
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

注意，您需要在 .carousel-indicators 中添加一些 PHP

【讨论】：