标签: twitter-bootstrap-4

使用Bootstrap v4将按钮对齐到"卡"的右侧

我是Bootstrap的新手,并且认为我会使用他们的v4 alpha版本.

我正在尝试将以下示例中的"安排评估"按钮(靠近页面底部)对齐到右侧,同时将其他文本对齐到左侧.我还需要文本和按钮在中间垂直对齐.

http://www.atlasestateagents.co.uk/mlb/landlords/services-and-fees.php

你能帮我吗？

<div class="card card-block card-blue clearfix">
    <p class="card-text">Want to know how much rent you could achieve for your property?&nbsp;<a href="#" class="btn btn-blue-outline pull-right">Arrange a Valuation</a></p>
  </div>

Run Code Online (Sandbox Code Playgroud)

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

Mic*_* LB

2016 02-03

5
推荐指数

2
解决办法

1万
查看次数

Bootstrap 4 固定导航栏与身体重叠

现在 [几乎] 一切都基于 off rems，导航栏似乎有一些时髦的高度属性。一方面，导航栏高度是可变的，而顶部和底部的填充是静态的 8px。

由于导航栏的伪动态特性，简单地将 body 的 padding-top 设置为 50px 不再有效。如果用户更改其字体大小，条形高度将不再是 50 像素。

有没有人想出如何在滚动到页面顶部时为主体提供适当的填充量以使其恰好位于导航栏下方？

如果必须使用 jQuery 来实现这一点，这似乎是一种回归，但也许这是唯一的方法。

示例代码：

body {
  padding-top: 54px;
  background-color: blue;
}

div.container-fluid {
  background-color: red;
}

Run Code Online (Sandbox Code Playgroud)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar" class="navbar navbar-fixed-top navbar-dark bg-inverse container">
  <a href="www.google.com" class="navbar-brand">google.com</a>
</nav>

<div class="container-fluid">
  <p>I am content that is getting overlapped by the navbar!</p>
</div>

Run Code Online (Sandbox Code Playgroud)

请注意条形在某些字体大小处如何重叠，而在其他大小处则有间隙。在 Mac OS X 上，您可以使用 command+minus 和 command+plus 更改字体大小

编辑：我在 bootstrap 4 github 页面上提出了一个问题。该错误已确认，但可能超出范围，因为它们通常不支持缩放效果。

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

kjb*_*kjb

2016 02-03

5
推荐指数

1
解决办法

2138
查看次数

如果我有Bootstrap背景,在语义UI中思考？

我熟悉使用Bootstrap(v3和v4)开发webapps和网站,但现在我想开始使用Semantic UI.

经过一些实验,我觉得Semantic UI提供的可组合性比Bootstrap少,但我可能会遗漏一些东西.例如,我还不清楚如何将文本静音？Bootstrap有一个text-muted类,但我在Semantic UI中找不到相应的东西

题

你能描述一下必要的范式转变吗？以下是一些可能有助于您确定答案的问题:

我应该停止做什么/使用什么;
我应该开始做什么/使用呢？
是否存在任何服务器端注意事项/限制？

NB:我不是在寻找Semantic UI和之间的详细比较Bootstrap.

css-frameworks twitter-bootstrap-3 semantic-ui twitter-bootstrap-4 bootstrap-4

Édo*_*pez

2016 09-19

5
推荐指数

1
解决办法

773
查看次数

如何限制卡片组的列数？

这是我的代码,我想要实现的只是连续四列,并且不多于或少于此,但是目前,卡的数量范围从1-10,它们一直压缩到10.

        <div class="card-deck-wrapper">
            <div class="card-deck">
                @foreach($resource->projects as $project)
                    <div class="card card-project">
                        bla bla (every card let's say is like this)
                    </div>
                @endforeach
            </div>
        </div>

Run Code Online (Sandbox Code Playgroud)

frontend twitter-bootstrap twitter-bootstrap-4

Abd*_*yab

lucky-day

5
推荐指数

2
解决办法

8958
查看次数

如何使用Bootstrap在响应式视图中拆分列？

我正在使用Bootstrap v4 alpha4

目前我有:

.row
  .col-xs-12.col-md-8
    div A
  .col-xs-12.col-md-4
    div B
    div C

Run Code Online (Sandbox Code Playgroud)

对于xs布局,我希望div顺序为:

Div B
Div A
Div C

Run Code Online (Sandbox Code Playgroud)

我不知道如何做到这一点或如何甚至询问它.我不是前端开发者所以我不知道叫什么东西.

我们可以将HTML更改为我们想要的任何内容.它不是要留喜欢它就是现在.

css responsive-design twitter-bootstrap twitter-bootstrap-4 bootstrap-4

Tha*_*you

2016 10-13

5
推荐指数

1
解决办法

1385
查看次数

将引导程序与 vue webapp 一起使用：如何自定义

我在我的 Vue webapp 中使用了bootstrap-4，但我无法按照这里的解释进行自定义。

我有使用Bootstrap CDN 的index.html，如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Sample</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

    <link rel="stylesheet" href="/static/custom.scss" type="text/x-scss">  ==> where I am overwriting variable
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="app"></div>

    <script src="/dist/client-vendor-bundle.js"></script>
    <script src="/dist/client-bundle.js"></script> -->
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

我也试过改变的顺序custom.scss，并bootstrap.css在index.html的为好。

以下是 …

css twitter-bootstrap vue.js twitter-bootstrap-4 bootstrap-4

Sau*_*abh

2016 11-29

5
推荐指数

1
解决办法

3670
查看次数

aria-haspopup 有什么作用？

我正在学习如何在 Bootstrap 4 中创建导航栏和下拉菜单，而不是“data-target”属性，我注意到“aria-haspopup = 'true'”。你们能解释一下这条线的作用吗，我可以用什么值？这是代码的完整行：

落下

bootstrapping twitter-bootstrap-4

rya*_*627

2016 12-15

5
推荐指数

1
解决办法

6159
查看次数

Bootstrap 4 中心导航栏品牌与折叠

引导程序 4 Alpha 6

我似乎无法弄清楚如何使正确的链接和左链接都折叠起来。现在只有右手边的链接崩溃。

<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    Menu
</button>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
    </ul>
</div>

<a class="navbar-brand mx-auto" href="#">NavBar</a>

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
    </ul>
</div>

Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap twitter-bootstrap-4

Ema*_*uel

lucky-day

5
推荐指数

1
解决办法

2万
查看次数

Bootstrap 4-我不希望列的高度相同

在此引导程序4示例中，两列具有相同的高度。我不想这样。有快速解决方案吗？

    <div class="col-lg-3 card bg-faded">
      <h1><small>Some favorites</small></h1>
      <ul>
        <li>Celery root</li>
        <li>Spaghetti Squash</li>
        <li>Killer Mushrooms</li>
      </ul>
    </div>

    <div class="col-lg-9">
      <h1>Wild & Wicky Vegetables</h1>
      <p>Kale c.....t.</p>
    </div>
</div><!--row-->

Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap twitter-bootstrap-4 bootstrap-4

Moh*_*Ait

2017 06-26

5
推荐指数

2
解决办法

3227
查看次数

引导4选项卡动画

我正在尝试为引导4导航上的选项卡窗格设置动画。

这是我的示例代码：

.tab-pane {
  transform: translateY(100%);
  transition: transform 2s;
}
.tab-pane.active {
  transform: translateY(0%);
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" type="text/css">

<nav class="nav nav-tabs" id="myTab" role="tablist">
  <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
  <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
  <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. …

Run Code Online (Sandbox Code Playgroud)

jquery animation tabs twitter-bootstrap-4

Mih*_*puc

lucky-day

5
推荐指数

2
解决办法

7767
查看次数