twitter-bootstrap-3 相关问题

Bootstrap 3是前端框架的第三代，允许更快速的Web开发，具有迷人的外观和感觉。与[twitter-bootstrap]标签一起使用

我刚刚在我的网站上创建了引导导航栏，但我的网址遇到了问题...... 例如我有这样的东西：我刚刚在我的网站上创建了引导导航栏，但我的网址遇到了问题...... 例如我有这样的东西： <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li> <a data-toggle="collapse" data-target=".navbar-collapse" href="#about"> About </a> </li> </ul> </div> 我的网站网址如下所示：“something.html#about” 我想从网址中删除#about。我读到我应该删除？来自此 li 项目的 href，并将 #about 放入 data-target 但它对我不起作用。解决这个问题最简单的方法是什么？感谢您的任何回复。您可以使用 data-target 代替 href。它将帮助您从浏览器 URL 中删除 #about。所以代替 href="#about" 使用 data-target="#about" 我假设您是 HTML 以及网页如何工作的初学者。 HTML 元素 a(nchor) 的 href 属性定义超链接。 “#something”指向 HTML 网页中的 ID。它可以通过特定页面上的 JavaScript 访问。在这种情况下，您的 href 指向当前页面，因为没有引用其他页面（该 href 没有像 href="otherPage.html#about" 这样的内容）。引导框架可能需要它。这并没有什么问题。拥抱它，它是互联网的一部分，也是浏览器工作方式的一部分。 Também gostaria de sabre 解析器 isso。 Pois comecei trabalhar com Bootstrap e vi que na URL semper vem assim: (www.exemplo.com.br/#exemplo).. ao invés de (www.exemplo.com.br/exemplo)。 Gostaria de deixar dessa segunda forma.

html url twitter-bootstrap-3

回答 3 投票 0

禁用 Bootstrap 中的链接

第一个示例不起作用。我需要始终有一个列表来禁用链接？或者我的第一个演示有什么问题？链接已失效第一个例子不起作用。我需要始终有一个列表来禁用链接？或者我的第一个演示有什么问题？ <a class="disabled" href="#">Disabled link</a> <ul class="nav nav-pills"> ... <li role="presentation" class="disabled"><a href="#">Disabled link</a></li> ... </ul> https://jsfiddle.net/7y0u2amy/ 我认为你需要 btn 课程。会是这样的： <a class="btn disabled" href="#">Disabled link</a> Bootstrap 似乎不支持禁用链接。您可以自己添加一个类并向其添加一些样式，而不是尝试添加 Bootstrap 类，就像这样： a.disabled { /* Make the disabled links grayish*/ color: gray; /* And disable the pointer events */ pointer-events: none; }  <a href="#" class="disabled" tabindex="-1">Link to disable</a><br/> <a href="#">Non-disabled Link</a> 我刚刚使用 CSS 创建了自己的版本。因为我需要禁用，然后当文档准备好时使用 jQuery 激活。这样，在文档准备好之前，用户无法单击按钮。所以我可以用 AJAX 代替。我想出的方法是向锚标记本身添加一个类，并在文档准备好时删除该类。可以根据您的需要重新调整它的用途。 CSS： a.disabled{ pointer-events: none; cursor: default; } HTML： <a class="btn btn-info disabled">Link Text</a> JS： $(function(){ $('a.disabled').on('click',function(event){ event.preventDefault(); }).removeClass('disabled'); }); 如果您想要禁用链接，则没有选项可以执行此操作。我想你可以在这里找到适合你这个问题的答案。这里的一个选择是使用 <a href="/" onclick="return false;">123n</a> 禁用href标签您不能仅将链接设置为“禁用”输入、文本字段等系统元素。但是您可以使用 jQuery/JavaScript 禁用链接 $('.disabled').click(function(e){ e.preventDefault(); }); 只要将上面的代码包装在您想要禁用链接的任何事件中即可。使用 class="pe-none"。找到引导程序链接这里。 <a class="btn btn-outline-primary pe-none" target="_blank" href="#" role="button">Open</a> 我刚刚从我想要禁用的锚标记中删除了“href”属性 $('#idOfAnchorTag').removeAttr('href'); $('#idOfAnchorTag').attr('class', $('#idOfAnchorTag').attr('class')+ ' disabled'); 感谢@jacob-van-lingen的评论，您可以在您的全局样式中扩展.btn-link a.disabled{ @extend .btn-link } 我开发了以下解决方案，因为当我将 Bootstrap 5 提供的 btn disabled 等类样式应用于卡片内的 <a> 元素时，边距和填充将应用于该元素： .disabled { color: currentColor; cursor: not-allowed; opacity: 0.5; text-decoration: none; } <a href="#" class="disabled">Disabled Link</a> 我喜欢 Sercan 的答案，我在其中添加了一个小 jQuery，这样点击时链接也不会被跟随： $(document) .on("click", "a.disabled", function () { return false; }); 从上面的答案来看： .disabled { color: currentColor; cursor: not-allowed; opacity: 0.5; text-decoration: none; } 更改为然后就可以禁用它了。 html：文字 js： $("#myId").prop("已禁用",true);

html css twitter-bootstrap twitter-bootstrap-3

回答 11 投票 0

如何将“品牌”文本/徽标向右移动/偏移（并将末尾的文本向左偏移）

好吧，我开始探索 Bootstrap，并在此过程中构建了页面顶部的基本导航栏。但是，当我按照 bootstrap 在其页面上提供的演示代码进行操作时，...

twitter-bootstrap-3

回答 1 投票 0

打开模态框的第二个按钮在第一次单击时没有响应并且无法正确关闭

我正在开发一个项目，用户需要使用签名板签署表单。该表单需要三个单独的签名，我已经实现了三个按钮来打开签名板的模式。

php html jquery twitter-bootstrap-3 bootstrap-modal

回答 1 投票 0

引导轮播可切换/动态选项卡

我尝试在每个选项卡中创建一个图片库（主页、菜单1、菜单2、菜单3），在第一个选项卡中它可以工作，但在另一个选项卡（菜单1）中它不能工作。它启动图库但无法使用选择器切换...

html jquery css twitter-bootstrap-3

回答 2 投票 0

图像在 Bootstrap 3 中没有响应

我正在编写以下代码。为什么图像在 Bootstrap 3 中没有响应？我正在编写以下代码。为什么图像在 Bootstrap 3 中没有响应？ <!DOCTYPE html> <html> <head>  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">  <link rel="stylesheet" href="css/Style.css"> </head> <body> <div class="container"> <div class="rainbow"> <img src="img/header.png" alt="DayCare" /> </div> </div>  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </body> </html> 我在 Bootstrap 2.3 上进行了测试，运行良好。将 'img-responsive` 类添加到 img... <img src="img/header.png" class="img-responsive" alt="DayCare" /> 您可以像这样轻松完成： <img src="img/header.png" style="width:100%; height:auto; display:block;" /> 如果标题图片的宽度小于屏幕宽度，则应在样式中添加 max-width，以在大视图中保持标题的原始宽度。例如，假设 header 的原始宽度是 600px，img 应该是这样的： <img src="img/header.png" style="width:100%; height:auto; display:block; max-width:600px" /> 同意 Skelly 的观点，img 响应式效果很好。我尝试使用此代码（删除 Style.css），工作正常。 <!DOCTYPE html> <html> <head>  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> </head> <body> <div class="container"> <div class="rainbow"> <img class="img-responsive" src="bootstrap/resources/img/charpente/toulenne/IMGP0110.JPG" alt="DayCare" /> </div> </div>  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </body> </html> 尝试删除 Style.css

twitter-bootstrap twitter-bootstrap-3

回答 3 投票 0

引导多选不起作用

我正在尝试使用多选Bootstrap，我使用了以下代码，该代码也可以在他们的网站（http://davidstutz.github.io/bootstrap-multiselect/）中找到，它显示了多选按钮

twitter-bootstrap twitter-bootstrap-3 multi-select

回答 7 投票 0

ASP 服务器标记未呈现

我正在使用引导程序来折叠和展开策略的详细信息视图。我有下面的代码，我的服务器标签未解析为客户端 ID，并在 htm 中保持为 <%= details.ClientID %>...

asp.net twitter-bootstrap-3

回答 2 投票 0

如何使我的下拉菜单可滚动

目前我有一个下拉菜单，当用户将鼠标悬停在它上面时会弹出。下拉菜单当前显示 8 个链接。我想放置 21 个链接，但这会占据整个屏幕。怎么办...

html twitter-bootstrap twitter-bootstrap-3

回答 3 投票 0

引导程序溢出未正确对齐

我正在制作一个页面，在小屏幕（即手机）上我希望图像位于文本上方，而在较大屏幕上我希望图像位于文本右侧。我正在使用 offset 来拉动 im...

php twitter-bootstrap-3

回答 1 投票 0

在react-bootstrap中更改NavDropdown的颜色和背景颜色

在react-bootstrap中使用我的NavDropdown，我无法设置其颜色或背景颜色的样式...... 使用 NavDropdown 中的 react-bootstrap，我无法设置其颜色或背景颜色的样式... <NavDropdown eventKey={3} className="text-center" style={{ fontSize: `130%` }} title="Items to Choose" > <LinkContainer to="/about"> <MenuItem eventKey={3.1} className="text-center">About</MenuItem> </LinkContainer> <MenuItem divider /> <LinkContainer to="/products"> <MenuItem eventKey={3.2} className="text-center">Products</MenuItem> </LinkContainer> <MenuItem divider /> <LinkContainer to="/blog-index"> <MenuItem eventKey={3.3} className="text-center">Blog</MenuItem> </LinkContainer> </NavDropdown> 我可以使用 style={{ fontSize: '130%' }} 更改字体大小，但我还想使用 .. 更改颜色和背景颜色 style={{ fontSize: '130%', color: '#fff', backgroundColor: 'blue' }} ...但是 color 和 backgroundColor 在括号内不起作用。我尝试做的一件事是将 <NavDropdown> 元素包装在样式 div 中，但这搞乱了导航栏元素的对齐方式。还可以提供标题文本作为 JSX 元素。 <NavDropdown title={ <span className="text-primary my-auto">Dropdown</span> } id="nav-dropdown" > <NavDropdown.Item>Action</NavDropdown.Item> <NavDropdown.Item>Another action</NavDropdown.Item> </NavDropdown> 并且不需要编写自定义 CSS，这可能是我们想要避免的。设置 NavDropdown 的 id 并为此 id 创建 css 样式。反应中： <NavDropdown title={"Example"} id="nav-dropdown"> 在 CSS 中： #nav-dropdown{ color: white; font-weight: bold; background-color: red; } 使用 Chrome 中的检查元素工具检查后。我通过在我的index.html中添加以下几行来使其工作' div.dropdown-menu.show { background-color: #000000; // for drop down menu color } a.dropdown-item { color: #ffffff; // for font color of individual drop down item } ` 对于您选择的选择器。您提供的代码结构中不存在这一点。您是如何想出选择器的？

css reactjs twitter-bootstrap-3 react-bootstrap

回答 4 投票 0

缩小整个引导页面

当我在 Chrome 中缩小到 80% 时，我的引导页面看起来不错。有没有办法修改css来缩小整个网站？

css twitter-bootstrap-3

回答 3 投票 0

引导程序对齐按钮旁边的文本框的问题

我正在尝试构建我在图像中附加的内容，但不幸的是我无法让它正确放置，到目前为止这是我的HTML（我是引导程序的新手）我正在尝试构建我在图像中附加的内容，但不幸的是我无法让它正确放置，到目前为止这是我的 HTML（我是引导程序的新手） <div class="row"> <div class="container"> <div class="col-lg-3"> </div> <div class="col-lg-6"> <p class="text-center"> <strong>Enter your email and get special information</strong> </p> @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-inline col-lg-12" })) { <div class="input-group col-lg-9" style="margin-left: 3%"> <input type="text" class="form-control"> </div> <div class="input-group col-lg-2"> <button class="btn btn-primary">Submit</button> </div> } </div> <div class="col-lg-3"> </div> </div> </div> 本来应该是这样的但看起来像这样，理想情况下我希望按钮离文本框更近一点但是当我在移动屏幕上查看它时，我遇到了混乱如有任何帮助，我们将不胜感激。这个小提琴怎么样： http://jsfiddle.net/jwyr6Lwh/1/ .custom input.form-control { border: 1px solid #848484; -webkit-border-radius: 30px !important; -moz-border-radius: 30px !important; border-radius: 30px !important; -moz-box-shadow: 2px 2px 1px #666; -webkit-box-shadow: 2px 2px 1px #666; box-shadow: 2px 2px 1px #666; outline:0; padding-left:10px; padding-right:0px; background-color: rgba(255,255,255,0.2); } .custom button { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } 在移动浏览器上显示不同的原因是它的响应能力 class="col-lg-2" 意味着在大型设备上它将显示在两列中，否则一列在另一列下面。如果您不打算这样做，请采取class="col-sg-2"。这个怎么样？ http://jsfiddle.net/ytn7z6tc/4/ <h3 id="btn-groups-single">Input + Button</h3> <div class="input-group"> <input type="text" class="form-control " placeholder="email address"> <div class="input-group-btn"> <button type="button" class="btn btn-primary"> Submit </button> </div> </div>

html css twitter-bootstrap twitter-bootstrap-3

回答 2 投票 0

Bootstrap 3 Glyphicons CDN

注意！在此拉取请求合并后，Bootstrap 图标又回来了。经过过去几周的反复思考，我决定恢复 Glyphicons 图标......

html css twitter-bootstrap cdn twitter-bootstrap-3

回答 5 投票 0

停用 Bootstrap 表中表行的悬停状态

有没有办法在 Bootstrap Table 中停用表行上的悬停状态？它会自动设置在那里...

css twitter-bootstrap-3 hover bootstrap-table

回答 2 投票 0

出现简单 HTML 中的滚动条

下面的代码显示了一个 HTML 滚动条。下面的代码显示了一个 HTML 滚动条。 <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body > <div class="container-fluid"> <div class="row"> <div id="oCol1" class="col-sm-12 col-xs-12 col-md-6"> <div class="table-responsive" style="width:100%"> <table style="width:100%; border: none" > <tr> <td> <div class="row"> <div class="col-sm-12"> Test </div> </div> </td> </tr> </table> </div> </div> </div> </div> </body> </html> 这是我能做到的最简单的 - 代码已生成。为什么我用这个 HTML 得到一个水平滚动条。我无法添加溢出：隐藏，因为在其他场景中会有广泛的内容 - 这种情况不是其中之一。水平滚动条的原因与引导程序有关。如果您检查表和行，您会发现 --bs-gutter-x: 0; 应用于导致问题的行，如果将其设置为 0，它将得到修复。添加这个.row{--bs-gutter-x: 0 !important;}，它就会得到修复。下面是相同的工作示例，如果我错过了某些内容，请分享。注意：下面运行时的垂直滚动条仅在 SO 中可见 .row { --bs-gutter-x: 0 !important; --bs-gutter-y: 0 !important; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"> </script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <h2 class="mainDiv"> <div class="container-fluid"> <div class="row"> <div id="oCol1" class="col-sm-12 col-xs-12 col-md-6"> <div class="table-responsive" style="width:100%"> <table style="width:100%; border: none"> <tr> <td> <div class="row"> <div class="col-sm-12"> Test </div> </div> </td> </tr> </table> </div> </div> </div> </div> </h2> <script> console.log("Welcome to CCE") </script> </body> </html>

css twitter-bootstrap-3

回答 1 投票 0

需要帮助在较小的屏幕上将“添加到购物车”按钮移动到 opencart v2.3 中产品页面上的描述选项卡上方

在opencart v2.3中，较小屏幕上的产品页面层次结构如下：标头产品图片描述和评论选项卡价格、选项、添加到购物车按钮页脚这种情况只发生在较小的s上...

javascript twitter-bootstrap-3 opencart opencart2.x opencart2.3

回答 1 投票 0

引导间距类不起作用

我正在尝试向我的 div/ul 添加间距，如 Bootstrap 实用程序文档中所示。但它根本不起作用，我什至无法在 Firebug 中跟踪该类。 http://v4-alpha.getbootstrap.com/

css twitter-bootstrap-3 padding margins

回答 6 投票 0

Bootstrap 中的嵌入 pdf 不是全高

我在此页面上嵌入的 pdf 出现问题。赞助该网站之前的版本是 html4，嵌入是使用这样的对象标签完成的我在此页面上嵌入的 pdf 出现问题。赞助这个网站之前的版本是html4，嵌入是用像这样的对象标签完成的 <object data="pdf/GreekFestSponsorship2013.pdf" type="application/pdf" width="100%" height="700px"> <p>It appears you don't have a PDF plugin for this browser.</p> <p id="missing-pdf-plugin">You can <a href="pdf/GreekFestSponsorship2013.pdf">click here to download the PDF file</a>.</p> </object> 这是新代码 /* Flexible iFrame */ .flexible-container { position: relative; height: 0; overflow: hidden; } .flexible-container iframe, .flexible-container object, .flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Greek Festival Portsmouth NH</title>  <link href="css/bootstrap.min.css" rel="stylesheet">  <link href="css/custom.css" rel="stylesheet"> <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">     <script src="https://use.fontawesome.com/a0aac8df13.js"></script> <meta name="Description" content="Three fun-filled days in Portsmouth NH as the magic of Greece comes to town. The Glendi or party will begin on Friday, July 15th, July 16th and July 17th with authentic Greek food. We will offer live Greek music from the band orfeas and continual music by DJ Meleti. In addition to the food, there will be booths that will offer imported jewelry, arts and crafts from Greece. A children's play area will ensure the entire family enjoys their virtual visit to this ancient land."> <meta name="Keywords" content=" st. nicholas greek orthodox church, nicholas in greek, greek cuisine, st. nicholas greek orthodox cathedral, charleston food and wine, greek orthodox archdiocese, goarch.org, greek food festivals, st nicholas greek festival, greek food festival, wine events, orthodox christianity, food and wine events, wine tasting events, greek orthodox calendar, dallas greek festival, greek festival st. louis, st nick gift ideas, st nicholas greek orthodox, what to do in portsmouth nh, wine and food events, greek for church, greek orthodox religion, food and wine festival 2016, nicholas greek, st nicholas greek, st louis greek, festival seacoast online calendar, portsmouth events, orthodox music, greek orthodox christian, greek orthodox churches, greek orthodox music, greek orthodox christianity, greek festival st louis mo, greek dates, seacoast nh events, st nick gifts, greek orthodox icon, annunciation ,greek orthodox wine event, orthodox greek food and wine festivals, 2016 food and wine event, church in greek, greek orthodox church ann arbor, famous greek foods, portsmouth high, charleston wine festival, live music in portsmouth nh, activities in portsmouth nh, greek orthodox faith, greek orthodox festival st nicholas, orthodox greek nicholas, food and wine tasting, food and wine shows, food and wine events 2016, moving to portsmouth nh, portsmouth nh food music festival july, portsmouth nh classifieds, greek food items, live music in nh, festival this weekend, festival of food, eastern orthodox music, greek orthodox religious items, glendi festival, music festival, vendors, where is portsmouth nh, portsmouth activities, saint nicholas orthodox, becoming greek orthodox, greek church, music, music festival dates, greek orthodox bishop, orthodox children festival in july, greek orthodox food events in portsmouth, greek orthodox festivals, dates in greek, eastern orthodox new year, greek orthodox schools, food in portsmouth, music festival in july, beer, weekend wine activities, the greek orthodox, on line events, greek orthodox community, orthodox music "> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta name="theme-color" content="#ffffff"> </head> <body> <div class="main-navigation-container navbar-fixed-top" id="primary-navbar"> <nav class="navbar"> <div class="container-fluid">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navigation" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="" title="PortsmouthGreekFestival.com">PortsmouthGreekFestival.com</a> </div>   <div class="collapse navbar-collapse" id="primary-navigation"> <ul class="nav nav-justified"> <li><a href="index.html">Home<span class="sr-only">(current)</span></a></li> <li><a href="Menu.html">Menu</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="events.html">Schedule of Events</a></li> <li><a href="sponsors.html">Sponsors</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> </nav> </div> <header class="masthead"> <img src="images/Banner.jpg" alt="Portsmouth Greek Festival Logo"> </header>   <div class="container"> <h1>Sponsorship Opportunities</h1> <div class="flexible-container-embed"> <object data="pdf/GreekFestSponsorship2013.pdf" type="application/pdf" width="100%" height="100%"> <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://portsmouthgreekfestival.com/pdf/GreekFestSponsorship2013.pdf">Download PDF</a></p> </object> </div> </div> <footer>  <div id="Copyright"> <p>Copyright © <script>document.write(new Date().getFullYear());</script> PortsmouthGreekFestival.com</p> </div> </footer>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  <script src="js/bootstrap.min.js"></script>  <script src="js/ie10-viewport-bug-workaround.js"></script> </body> </html> 您可以在此屏幕截图中看到 pdf 的高度为何不是 100%。您有 2 个额外的规则集可以按预期工作但是您需要... ...在 HTML 中更正此问题： <div class="flexible-container-embed"> 对此： <div class="flexible-container"> ...并将其添加到 .flexible-container CSS 规则集： padding-bottom: 100%; 添加这 2 个规则集时，将它们放入 <style> 元素中，然后将其添加到 <head> 元素内的最后一个位置。请访问下面的 Plunker 链接查看示例。 /* Flexible iFrame */ .flexible-container { position: relative; /* This blank line was probably: || padding-top: 56.25%; */ height: 0; overflow: hidden; } /* This ruleset says: || "Apply the following properties and their values to ANY `<iframe>`, || `<object>`, or `<embed>` THAT IS A CHILD OF any element with the || class of `.flexible-container`. */ .flexible-container iframe, .flexible-container object, .flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 当您应用这 2 个规则集时，您已经为包装 <object> 的 div 指定了 .flexible-container-embed 类，但这两个规则集都适用于具有 .flexible-container 类的元素，以及它的任何子级为 <iframe> 的元素、 <object> 或 <embed>。基本上，删除类名中的 -embed 部分。接下来是 padding-bottom 属性。通常为 56.25%，当应用于 iframe 容器时，适当的上下文可以保持 9 的高度和 16 的宽度。这对于宽屏幕格式视频来说很好，但对于 PDF 来说不太好，因为 PDF 可能具有长宽比为 8:11 或 72%（我在演示中使用了 100%，因为这是您所要求的，预计编辑将包含 72% 版本。）如果我们将填充与 height:0 结合起来，我们会得到一个类似于“shrinkwrap”的容器，根据内容的宽度调整其高度。更新：由于 PDF 插件添加了填充，从 100% 到 72% 没有明显的变化。我将<object>更改为<iframe>，因为它们更通用，您也可以使用<embed>。回顾这个PLUNKER 以 100% 的高度显示 PDF 文件是相当困难的。您可能想要采用 Bootstrap 的“响应式嵌入式媒体”方法，因为结果相当不错，而且麻烦也更少。 Chrome 中的结果： Firefox 中的结果：源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PDF</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello World!</h1> <div class="embed-responsive embed-responsive-4by3"> <object data="test.pdf" type="application/pdf"> <p> Your browser does not support embedded PDF files.<br> <a href="test.pdf">Click here to download the PDF file.</a> </p> </object> </div> </div> </body> </html> 请记住，并非所有浏览器都支持嵌入 PDF 文件，因此 <object> 标签内有此通知。

html css twitter-bootstrap twitter-bootstrap-3

回答 2 投票 0

在页面刷新/导航时保留 Twitter Bootstrap 折叠状态

我正在使用 Bootstrap“折叠”插件为一长串链接制作一个手风琴。 Accordion-body 标签包含“collapse”，因此页面加载时所有组都会折叠。当你打开...

javascript jquery twitter-bootstrap twitter-bootstrap-3

回答 10 投票 0

twitter-bootstrap-3 相关问题

最新问题