标签: bootstrap-4

btn-xs不再是bootstrap 4中的有效选项吗？

我刚刚迁移到bootstrap 4,我的xs按钮似乎不再特别小!

查看bootstrap 4中按钮的文档,我没有看到额外的小按钮选项？

谁能为我证实这一点？

谢谢!

twitter-bootstrap twitter-bootstrap-4 bootstrap-4

Dra*_*gan

2016 02-03

47
推荐指数

4
解决办法

2万
查看次数

Bootstrap 4 - 卡列中的响应卡

我玩引导4,虽然在我无法找到一个解决方案,以增加响应能力卡div用class="card-columns"(本类应用砖石般的效果的卡有这个类的DIV中).

在引导3是容易款式,使"卡片"响应,因为它是可以应用类似class="col-md-3 col-sm-6 col-xs-12"包含一个div thumbnail,caption等等.

在Bootstrap 4中使用卡时如何获得相同的效果？

这是HTML:

<body>

<div class="container-fluid">
    <div class="row">

        <div class="col-md-4 hidden-sm-down" id="map_container">
            <p>here we put the map</p>
        </div>

        <div class="col-md-8 col-sm-12 right_box">

            <div class="row">

                // here there's code for navbar

            </div><!-- row -->

            <div class=row">
                <div class="card-columns">
                    <?php
                    // Create and check connection

                    if ($result->num_rows > 0) {

                        // output card design
                        while($row = $result->fetch_assoc()) {

                            echo '<div class="card">
                                    <img class="card-img-top" src="dance' . $row["id"] …

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap twitter-bootstrap-4 bootstrap-4

dav*_*ghz

2016 09-16

47
推荐指数

2
解决办法

9万
查看次数

Bootstrap 4卡片组,基于视口的列数

我正在尝试在bootstrap 4中实现卡片功能,以使我的所有卡片都具有相同的高度.

bootstrap提供的示例显示4张漂亮的卡片,但无论是视口,它都是4行卡片.请在此处查看codeply .

这对我来说没有意义,因为我认为,为了让你的内容看起来还不错,你需要将卡的最小尺寸缩小.

然后我尝试添加一些视口类来打破屏幕大小,但是一旦添加了div,卡片组就不再适用,因此不会使卡片的高度相等.

我怎样才能完成这项工作？这是缺少的功能,将在Bootstrap 4的完整版本中解决吗？

这是小提琴:https://jsfiddle.net/crrm5q9m/

<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, …

Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap twitter-bootstrap-4 bootstrap-4

gan*_*ers

2017 04-11

46
推荐指数

6
解决办法

7万
查看次数

Bootstrap 4:内部导航的多级下拉

在Bootstrap 4中进行多级下拉列表的最简单方法是什么？我设法在SO上找到的所有例子都太乱了或者没有包含在导航中.

我试过在下拉列表中放置一个下拉列表,但这似乎并没有起作用.有人可以帮我这个吗？

这是我的代码的基本大纲:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" …

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap bootstrap-4

Ret*_*ros

lucky-day

46
推荐指数

6
解决办法

11万
查看次数

如何使用Twitter Bootstrap构建2列(固定流体)布局？

是否可以使用Twitter Bootstrap(http)创建2列布局(固定 - 流体)布局(http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/) ://twitter.github.com/bootstrap/)？

你有什么解决办法？

css fluid-layout twitter-bootstrap bootstrap-4

mbe*_*ker

2018 02-26

45
推荐指数

2
解决办法

10万
查看次数

Angular 4 Bootstrap下拉列表需要Popper.js

我有一个全新的Angular 4 CLI应用程序.运行之后:

npm install bootstrap@4.0.0-beta jquery popper.js --save

Run Code Online (Sandbox Code Playgroud)

和编辑.angular-cli.json像这样:

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.slim.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js",
  "../node_modules/popper.js/dist/umd/popper.min.js"
],

Run Code Online (Sandbox Code Playgroud)

我在Chrome控制台中仍有问题:

Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:17548)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:23163)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:50902)
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
    at Object.../../../../script-loader/index.js!../../../../bootstrap/dist/js/bootstrap.min.js (bootstrap.min.js?f885:1)
    at __webpack_require__ (bootstrap a2f1d85ef068872b0530:54)
    at Object.2 (scripts.bundle.js:66)
    at __webpack_require__ (bootstrap a2f1d85ef068872b0530:54)
    at webpackJsonpCallback (bootstrap a2f1d85ef068872b0530:25)

Run Code Online (Sandbox Code Playgroud)

我该如何解决？

javascript bootstrap-4 angular-cli angular

mik*_*rsv

lucky-day

45
推荐指数

4
解决办法

4万
查看次数

Bootstrap - 对齐按钮到卡的底部

我正在偷看使用card-deck和card类的一个Bootstrap示例(定价示例).我想知道如果其中一个列表的项目少于其他列表,那么如何修复按钮对齐.

我希望所有按钮都垂直对齐(在每张卡的底部),但我无法找到一种方法.我尝试设置.align-bottom类以及将按钮包装进去<div class="align-text-bottom">.我也从这个问题中尝试了几个关于添加空间的建议,但是仍然没有成功(间距也应该是可变的,以便它填满列表中的剩余空间).

包装<div class="card-footer bg-white">不会产生预期的结果,因为它没有对齐卡底部的按钮,并且在它周围创建了某种边框.

有没有人有想法？

编辑:这是一个类似于问题的jsfiddle.

html css twitter-bootstrap bootstrap-4

a_g*_*est

2018 04-09

45
推荐指数

6
解决办法

4万
查看次数

将一个元素置于Bootstrap 4 Navbar中

无论我尝试什么,我都无法在Bootstrap导航栏中找到一些东西,任何解决方案呢？

我已经尝试添加div,使用margin:0 auto;或margin-right:auto; margin-left:auto;使用center-block类.没有什么可行的,为什么很难实现这么简单我无法理解的东西,我做错了什么？

这是当前的代码:

<nav class="navbar navbar-fixed-top navbar-dark main-nav">
<div class="container">
    <ul class="nav navbar-nav pull-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav text-center">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>

Run Code Online (Sandbox Code Playgroud)

css navbar twitter-bootstrap bootstrap-4

LuT*_*uTz

2018 04-23

44
推荐指数

2
解决办法

12万
查看次数

模态宽度(增加)

我希望模态为屏幕宽度的80%左右.modal-lg不够大.这个:

.modal .modal-dialog {
  width: 80%;
}

Run Code Online (Sandbox Code Playgroud)

不适用于Bootstrap 4.

bootstrap-modal bootstrap-4

Ole*_*yan

2018 11-06

41
推荐指数

4
解决办法

7万
查看次数

如何使用Bootstrap 4 flexbox填充可用内容？

我有一个使用bootstrap 4的角度应用程序.我有一个粘贴到顶部的导航栏,我想添加填充浏览器中剩余空间的内容.除了顶部的导航栏,我有另一个div本身包含页眉和页脚内容.在页眉和页脚之间,我有一个主内容部分,我希望该部分(#two在我下面的示例中)填充所有空白区域.

我以为我可以使用css flexbox来完成这个,但是当我进入bootstrap世界时,我的简单非引导flexbox示例似乎什么也没做.我正在使用这些文档试图解决这个问题.

我认为使用align-self-stretch应该有助于实现这个目标,但它看起来像包含元素可能正在调整自己的大小足以容纳我的#outer内容,因此没有扩展Flexbox要完成.我试着天真地只是添加height:100%样式到包含div只是为了尝试伸展,但这似乎没有帮助.

我根据@ ZimSystem的响应创建了这个plunker示例.他的代码示例似乎完全按照我的意愿工作,但当我尝试将更改分成我的简单角度代码时,柔性拉伸没有发生.我不确定我在转换中打破它是做什么的.

这是我目前正在查看的整个角度分量:

<div id="outer" class="d-flex flex-column flex-grow">
    <div id="one" class="">
        header content <br>
        another line <br>
        And another
    </div>
    <div id="two" class="bg-info h-100 flex-grow">
        main content that I want to expand to cover remaining available height
    </div>
    <div id="three" class="">
        footer content
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

这是显示导航栏和注入点的应用程序容器:

<div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        <a class="navbar-brand" href="#">
            <h1 class="navbar-brand mb-0">My App</h1>
        </a> …

Run Code Online (Sandbox Code Playgroud)

css flexbox twitter-bootstrap bootstrap-4 angular

Chr*_*mer

2017 08-12

41
推荐指数

2
解决办法

4万
查看次数