轮播图像未填充 bootstrap 3 中的宽度

2024-02-28

我对这种响应式的东西太陌生了。我正在尝试使用新 bootstrap 3 中的轮播,但由于某种原因,图像没有填充轮播的宽度。所有图像的尺寸完全相同(1000x395),无论我做什么,它都不会完全填满。非常感谢任何和所有的帮助!这是我正在使用的代码和屏幕截图:

<div class="row">
    <div class="col-md-12">

      <div id="carousel" class="carousel slide">
        <ol class="carousel-indicators">
          <li data-target="#carousel" data-slide-to="0" class="active"></li>
          <li data-target="#carousel" data-slide-to="1"></li>
          <li data-target="#carousel" data-slide-to="2"></li>
          <li data-target="#carousel" data-slide-to="3"></li>
          <li data-target="#carousel" data-slide-to="4"></li>
          <li data-target="#carousel" data-slide-to="5"></li>
          <li data-target="#carousel" data-slide-to="6"></li>
          <li data-target="#carousel" data-slide-to="7"></li>
          <li data-target="#carousel" data-slide-to="8"></li>
          <li data-target="#carousel" data-slide-to="9"></li>
        </ol>

        <div class="carousel-inner">

          <div class="item active">
            <img src="/images/temp/1.jpg" class="img-responsive">
          </div>
          <div class="item">
            <img src="/images/temp/2.jpg" class="img-responsive">
          </div>
          <div class="item">
            <img src="/images/temp/3.jpg" class="img-responsive">
          </div>
          <div class="item">
            <img src="/images/temp/4.jpg" class="img-responsive">
          </div>
          <div class="item">
            <img src="/images/temp/5.jpg" class="img-responsive">
          </div>
          <div class="item">
            <img src="/images/temp/6.jpg" class="img-responsive">
          </div>
          <div class="item">
            <img src="/images/temp/7.jpg" class="img-responsive">
          </div>
          <div class="item">
            <img src="/images/temp/8.jpg" class="img-responsive">
          </div>
          <div class="item">
            <img src="/images/temp/9.jpg" class="img-responsive">
          </div>
          <div class="item">
            <img src="/images/temp/10.jpg" class="img-responsive">
          </div>

        </div>

        <a class="left carousel-control" href="#carousel" data-slide="prev">
          <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#carousel" data-slide="next">
          <span class="icon-next"></span>
        </a>
      </div>

    </div> <!-- /col-md-12 -->
</div> <!-- /row -->

Add width="100%"到每个 img 行:<img src="/images/temp/2.jpg" width="100%">它将按比例增加高度以保持纵横比。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

轮播图像未填充 bootstrap 3 中的宽度 的相关文章

  • 设置引导工具提示上的箭头样式[重复]

    这个问题在这里已经有答案了 我正在尝试使用以下方式设置工具提示样式 tooltip inner 但我遇到了麻烦 因为我找不到如何设置工具提示小箭头的样式 如屏幕截图所示 工具提示的箭头是黑色的 我想在其上添加新颜色 any suggesti
  • Bootstrap 4 Beta 使用 Webpack 3.x 导入 Popper.js 会抛出 Popper 不是构造函数

    So Bootstrap 4 Beta出来了 耶 然而 Tether 已被取代Popper js用于工具提示 和其他功能 我看到控制台中抛出一个错误 速度足够快 足以建议我进行更改Popper js Bootstrap dropdown r
  • 获取异常 jQuery 必须包含在 Bootstrap 的 JavaScript 之前

    我遇到以下异常 bootstrap js 240 Uncaught TypeError Bootstrap 的 JavaScript 需要 jQuery jQuery 必须包含在 Bootstrap 的 JavaScript 之前 在 Ob
  • Bootstrap 4 移动导航栏消失

    我刚刚从 Bootstrap 3 转换为 Bootstrap 4 但我的移动导航栏出现问题 使用切换按钮展开导航栏时 导航消失 我不明白为什么会发生这种情况 导航栏下方有一个大屏幕 但整个移动导航向上移动 如下面的 gif 所示 以下是导航
  • 有不同图像尺寸的缩略图 Bootstrap

    我想要包含不同大小和不同文本量的图像的缩略图 但我希望它们都具有相同的大小 像这样来自 Bootstrap 站点的示例 http getbootstrap com components thumbnails custom content 下
  • Bootstrap 的网格每行列数

    Bootstrap 附带一个 12 列网格系统 必须放置在行内 我的问题是 列数 行数是否必须为 12 或更少 或者我可以有如下所示的布局吗 div class row div class col md 4 div div class co
  • 如何左对齐这些 Bootstrap 表单项?

    我是第一次使用 Bootstrap 在将此表单水平向左对齐时遇到很多麻烦 列表项是水平的 因为它们应该是水平的 但我希望控制标签 表单标签的 Bootstrap 类 全部位于向左浮动的相同位置 该表单包含在跨度为 7 的 div 中 因为我
  • 如何将焦点设置在 BootStrap 中的第一个输入字段上? [复制]

    这个问题在这里已经有答案了 可能的重复 如何将焦点设置到独立于 id 的 HTML 表单中的第一个输入元素 https stackoverflow com questions 277544 how to set the focus to t
  • 使 bootstrap popover 使用自定义 html 模板

    我正在使用输入组文本框 我需要 Bootstrap 3 弹出框才能工作 并且弹出框模板应由我定义和设计 所以我目前拥有的 html 是 div class row div class col sm 2 div class input gro
  • Bootstrap 停止模态显示在页面加载上

    我只希望当我单击某个按钮时显示模态框 目前 每当我加载页面时 模态框都会显示出来 有人可以告诉我我哪里出了严重的错误吗 a href myModal class btn Launch demo modal a div class modal
  • Bootstrap - 为反向行模式创建移动自适应

    我想用 Bootstrap 创建一个反向效果 第一行 左边是文字 右边是图像 第二行 左边是图片 右边是文字 第三行 左边是文字 右边是图片 第四行 左边是图片 右边是文字 而且这种情况一直持续下去 它在大型设备上看起来非常漂亮 但当它在设
  • qUnit:在 qunit-fixture 之外编写的 Twitter Bootstrap 模式

    我在为使用 Twitter Bootstrap 的项目编写 qUnit 测试时遇到了困难 当生成模态时 它将覆盖层放在 qunit fixture 之外 因此当运行下一个测试时 覆盖层不会被删除 有人遇到这个问题吗 点击事件 链接到jsfi
  • Angular Bootstrap $modal 如何动画化?

    我没有使用任何引导样式 我正在完全定制一切 制作动画相当简单 因为 modal uses fade in 我能够覆盖这些样式并且效果很好 但是模态是如何动画出来的呢 我没有看到任何类别被应用或删除 它会立即从 DOM 中删除 我怎样才能定制
  • 在 Bootstrap 3 中的工具提示中添加换行符

    我正在使用 Bootstrap 3 并向我的 div 添加了一个工具提示 我尝试过使用 n 和 创建新行 Bootstrap 会阻止我吗 div class content show tooltip 你需要添加data html true
  • 如何在卡组bootstrap vue上设置行列?

    我的 vue 组件是这样的
  • 如何将 twitter bootstrap 与 Spring MVC 一起使用

    我不明白为什么我的 Spring MVC 页面没有隐藏引导样式 我的你好 jsp
  • javascript - Twitter bootstrap jquery 插件未编译用于生产

    我正在使用 Twitter Bootstrap 开发 3 1 Rails 应用程序塞胡纳克的宝石 https github com seyhunak twitter bootstrap rails 在生产模式下 我可以通过管道预编译使用基本
  • 切换到 twitter bootstrap 的优点/缺点 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 清除 CSS 过渡

    我使用 CSS 框架 该框架在将鼠标移动到输入元素上时应用过渡 我有一堂课 我不想有这种转变 这可能吗 只需放置过渡 无 在CSS中并使其优先级高于其他 Example html div class a div div class a b
  • Bootstrap 3 按钮之间的空间

    如果我将几个 Bootstrap 3 按钮排成一行

随机推荐

  • 如何确保元组元素标签被保留?

    背景 我正在尝试使用带标签的元组元素将现有的重载函数替换为剩余参数 原始代码 这是原始重载函数的简化版本 function doSomething arg1 string arg2 number void function doSometh
  • 来自其他形式 VB.NET 的访问控制

    我正在 VS 2012 中开发一个有多种形式的 vb net 项目 比方说 我有一个带有 ListView 的 Form1 并且我从 Form1 调用 From2 我将此代码添加到 Form2 的 Load 事件中 Form1 ListVi
  • GitHub 中的多个分支

    我尝试使用以下说明在 github 上创建同一个第三方项目的第二个分支 https adrianshort org create multiple forks of a github repo https adrianshort org c
  • 在SQL Server 2005中,如何获取视图所依赖的其他数据库中的表?

    在 SQL Server 2008 中 对于给定数据库中的视图 我可以通过执行以下命令来获取该视图所依赖的其他数据库中的表 select distinct referenced database name referenced schema
  • 使用 spring-hateoas 使用基于 HAL 的 REST 服务

    我正在尝试使用 RestTemplate 类使用基于 HAL 的 REST 服务 响应正文如下所示 embedded school teachers name Adams state CA links self href http loca
  • 如何在 android 或 ios 移动设备上运行 Nodejs 运行时

    我正在尝试使用 Ionic Framework 为 iOS android 开发一款 chrome cast 应用程序 为此我在应用程序中需要很少的 NodeJS 包 它可以在我的桌面上运行 但我不确定它将如何在没有可用的 Node 运行时
  • Heroku Rails Rake 任务同步生产和本地数据库

    我正在尝试创建一个 rake 任务 以便我只需键入 rake db sync 即可更新我的本地数据库以匹配生产 该解决方案利用 Heroku 团队提供的代码 使用 PG 备份导入和导出 Heroku Postgres 数据库 https d
  • 查找包含集合中所有值的最短连续子数组的算法

    我有以下问题需要解决 给定一组整数 例如 1 3 2 以及随机整数数组 例如 1 2 2 5 4 0 1 1 2 2 0 3 3 找到包含集合中所有值的最短连续子数组 如果找不到子数组 则返回空数组 Result 1 2 2 0 3 Or
  • 获取Android上所有应用程序的运行时间

    嗨 我正在开发一个应用程序 我必须在其中获取running time设备上安装的所有应用程序 那么 是否可以知道别人的应用程序在手机上运行了多长时间呢 例如 gmail 应用程序在手机上运行了多长时间 有没有API为此 或者我们必须开发自己
  • 为什么 JMX 报告的 JVM 堆使用最大值会随时间变化?

    我的一个 hadoop 集群的名称节点上的 JVM 堆最大值配置为 8GB 当我使用 JMX 监控 JVM 时 报告的最大值不断波动 如附图所示 http highlycaffeinated com assets images heapma
  • Python 可以识别交互运行的文件的更改吗?

    我正在做一些故障排除 我很好奇是否可以交互地运行 Python 脚本 更改脚本中定义的函数 保存文件 然后让交互式 shell 识别更改 这是我目前正在做的一个例子 my script py def dummy func print Som
  • 使用 @parameters 的 T-SQL 动态分组

    我想实现 SELECT param1 param2 param3 t field1 sum t amount FROM table t WHERE t field 2 IS NOT NULL AND t field3ID 12345 GRO
  • scipy PchipInterpolator 实现问题

    我正在尝试基于链接实现 PchipInterpolator http docs scipy org doc scipy 0 14 0 reference generated scipy interpolate PchipInterpolat
  • pdf.js 与本地 pdf 文件

    我正在尝试 pdf js 库 只想在我的服务器上显示本地 pdf 文件 而不是示例提供的 pdf 文件
  • 带有构建优化器的 AOT 和 JIT

    我正在关注解决方案here https github com Alekcei AotAndJit使用的JitCompilerFactory加载运行时编译器和自定义装饰器以保留组件和模块元数据 但是有了 Angular cli build o
  • golang中如何通过引用传递结构体类型的接口?

    我需要通过引用传递结构类型的接口 如下所示 由于我不能使用接口指针来构造类型变量 我应该如何更改以下代码来修改te价值10 package main import fmt func another te interface te check
  • 获取使用 Chart.js 渲染的折线图 y 轴的最大值

    我使用 Chart js 渲染分散折线图 效果非常好 对于渲染算法 我需要找出 y 轴上显示的最高值 因此假设数据集中的 最大 点为 y 248 因此 y 轴显示 250 作为最大值 我需要知道它是250 我尝试在运行时检查图表对象 如下所
  • Material UI 主题覆盖:如何全局覆盖子样式?

    我正在构建一个应用程序材质UI库 https material ui com 对于 ReactJS 使用主题覆盖 API https material ui com customization overrides global theme
  • MongoDB C# 2.0 超时异常

    我们最近将 Web 应用程序升级到 MongoDB C Driver 2 0 并部署到生产环境 在一定负载以下 应用程序运行良好 一旦生产服务器上的负载超过一定限制 应用程序的CPU立即降至0 大约30秒后 该异常会被记录多次 System
  • 轮播图像未填充 bootstrap 3 中的宽度

    我对这种响应式的东西太陌生了 我正在尝试使用新 bootstrap 3 中的轮播 但由于某种原因 图像没有填充轮播的宽度 所有图像的尺寸完全相同 1000x395 无论我做什么 它都不会完全填满 非常感谢任何和所有的帮助 这是我正在使用的代