Questions tagged «bootstrap-4»

Bootstrap 4是流行的前端组件库的第四个主要版本。Bootstrap框架有助于创建响应式，移动优先的网站和Web应用程序。

6
引导程序4中的popper.js提供了SyntaxError意外的令牌导出
我尝试安装Bootstrap 4，并包含以下链接 <script src="libs/jquery/dist/jquery.min.js"></script> <script src="libs/tether/dist/js/tether.min.js" ></script> <script src="libs/popper.js/dist/popper.js"></script> <script src="libs/bootstrap/dist/js/bootstrap.min.js" ></script> 但是发生以下错误： 语法错误：意外的令牌导出 任何想法如何解决？
13
Bootstrap 4响应表不会占用100％的宽度
我正在使用Bootstrap 4构建Web应用程序，并遇到一些奇怪的问题。我想利用Bootstrap的表响应类来允许在移动设备上水平滚动表。在台式设备上，桌子应占据所含DIV宽度的100％。 一旦将.table-response类应用于表，表就会水平缩小，并且不再占用宽度的100％。有任何想法吗？ 这是我的标记： <!DOCTYPE html> <html lang="en" class="mdl-js"> <head> <title></title> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="application-name" content=""> <meta name="theme-color" content="#000000"> <link rel="stylesheet" href="/css/bundle.min.css"> </head> <body> <div class="container-fluid no-padding"> <div class="row"> <div class="col-md-12"> <table class="table table-responsive" id="Queue"> <thead> <tr> <th><span span="sr-only">Priority</span></th> <th>Origin</th> <th>Destination</th> <th>Mode</th> …
96 css  bootstrap-4 
6
将内容居中放在Bootstrap 4的列中
我需要帮助解决问题，我需要将内容放在bootstrap4列的中心，请在下面找到我的代码 <div class="container"> <div class="row justify-content-center"> <div class="col-3"> <div class="nauk-info-connections"> </div> </div> </div>
8
Bootstrap 4，如何将按钮居中对齐？
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8"> <div v-for="job in job"> <div class="text-center"> <h1>{{ job.job_title }}</h1> <p><strong>Google Inc. </strong> - {{ job.location }}</p> <h2><u>Job Description</u></h2> </div> <p v-html="desc"></p> <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p> <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button> </div> </div> <div class="hidden-sm-down col-md-4"></div> </div> </div> 无法弄清楚如何使此按钮居中。在BS 3中，我将仅使用中心块，但这不是BS4中的选项。有什么建议吗？
3
带有不同高度列的引导行
我目前有类似的东西： <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div> 现在假设这content是具有不同高度，宽度都相同的盒子-我该如何保持相同的“基于网格的布局”，又如何使所有盒子彼此对齐，而不是完美的线条。 目前，TWBS将把下一行的下一行col-md-4放在前第三行中的最长元素下。因此，每行项目都完美对齐（整洁）-太棒了，我希望每一项都直接位于最后一个元素的下方（“砌体”布局）
6
引导程序-将按钮对准卡的底部
我正在偷看一个使用card-deckandcard类的Bootstrap示例（Pricing示例）。我想知道，如果其中一个列表的项目少于其他列表，如何解决按钮对齐问题。 我希望所有按钮都垂直对齐（在每张卡的底部），但我想不出一种方法。我尝试设置.align-bottom类以及将按钮包装在中<div class="align-text-bottom">。我还尝试了有关添加空间的问题的一些建议，但是仍然没有成功（间隔也应该是可变的，以便它可以填充列表中的剩余空间）。 包裹<div class="card-footer bg-white">没有产生期望的结果，因为它没有对齐卡片底部的按钮，并且在卡片周围产生了某种边框。 有人有主意吗？ 编辑：这是一个类似于问题的jsfiddle。
6
通过Bootstrap4订购列
我想在台式机和移动设备上以不同的方式订购3列。目前，我的围裙看起来像这样： <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div> 运行代码段隐藏结果展开摘要 在移动视图中，我想要以下输出： 1-3-2 不幸的是，我不知道如何使用Bootstrap 4中的.col-md-push-*and.col-md-pull-*类解决此问题。
80 css  bootstrap-4  grid 
4
右对齐
我正在尝试创建2行的行。左边的一个col的内容左对齐，第二个col的内容右对齐（旧向右拉）。 我该如何在alpha-6中解决这个问题？ 我已经尝试了几件事，但这是到目前为止。我想念什么？ <div class="row"> <div class="col">left</div> <div class="col ml-auto">content needs to be right aligned</div> </div>
8
引导光标的Bootstrap V4 + CSS类
是否有任何CSS类或属性为pointer:cursor在引导4专为按钮或链接？ <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <button type="button" class="btn btn-success">Sample Button</button> 运行代码段隐藏结果展开摘要
9
Bootstrap 4中的左右对齐模式页脚按钮
Bootstrap 4将flex-box用于其模态页脚。如果我需要两个按钮，一个在左边，一个在右边，如何使其正常工作？ 下面的代码尝试使用div.rowwith，col-sm-6但不起作用。 <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button …
16
Bootstrap 4文件输入
我正在使用bootstrap 4文件浏览器。如果我使用自定义文件控件，则会一直看到“选择文件值”。 https://v4-alpha.getbootstrap.com/components/forms/#file-browser 选择文件后，我想更改选择文件的值。此值实际上隐藏在CSS中.custom-file-control:lang(en)::after，我不知道如何在javascript中访问和更改它。我可以这样获得所选文件的值： document.getElementById("exampleInputFile").value.split("\\").pop(); 我不需要改变 .custom-file-control:lang(en)::after { content: "Choose file..."; } 不知何故 链接：http：//codepen.io/Matoo125/pen/LWobNp
3
Bootstrap 4 img-circle类不起作用
我正在用HTML5和Bootstrap 4编写网站，并且试图将方形图像变成圆形。在Bootstrap 3中，可以轻松地实现此功能.img-circle，但现在似乎无法正常使用，也无法在线找到任何答案。Bootstrap是否放弃了img-circle类，还是我的代码搞砸了？ 它是这样的： <!-- Within a tab-content div --> <div class="col-xs-7"> <img src="img/gallery2.JPG" class="img-circle" alt="HelPic> </div> 希望有人可以帮助我:)
5
如何在Angular中将Bootstrap 4与SASS结合使用
我想在通过Angular CLI创建的Angular（4+）项目中将Bootstrap 4与SASS一起使用。 我特别需要： 使用SASS代替CSS作为全局样式和组件样式 编译Bootstrap SASS源以及我的自定义* .scss样式 确保我的自定义样式覆盖了Bootstrap源，因此我可以在需要时覆盖Bootstrap源，而无需编辑Bootstrap源本身（使升级Bootstrap源版本变得容易） 每当我的任何* .scss文件更改（包括组件和全局样式）都添加到ng serve脚本时，都可以添加watch和自动重新编译
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.