标签: bootstrap-4

我不知道如何以正确的方式做到这一点,但我怎样才能删除列之间的30px排水沟？但没有边距左:-30px设置.

<div class='container'>
  <div class='row'>

    <div class='col-lg-1'></div>
    <div class='col-lg-1'></div>
    <div class='col-lg-1'></div>

  </div>
</div>

我已经生成了一个yeoman网站,并附带了bootstrap 3,我该如何安装bootstrap 4.

所有教程都说要运行"bower install bootstrap",但这只是再次安装bootstrap 3.

我得到了十字交叉的信息,并想在这里提出这个问题.我在某些地方读过应该从html元素更改字体大小,例如:

html { font-size: 14px }

并且bootstrap 4 rem值将相应地更新文本.

有趣的是,如果我将html元素的font-size保持为默认值并更改引导变量以更改字体大小,我是否做错了什么？

例如:

html { font-size: 16px }

// Changing bootstrap variable to 
$font-size-base: 0.875rem //instead of 1rem

我知道Bootstrap 4使用新的显示实用程序来显示或隐藏基于屏幕大小的信息.我的问题是如何使用表格来完成这些工作？我想删除列,因为屏幕尺寸较小.

我使用过"d-xs-none"并没有任何效果.但是,当我使用"d-sm-none"时,当尺寸为"sm"或更大(与我需要的完全相反)时,将删除该列.如果我尝试"d-none d-xs-none",该列永远不会出现.如: <th class="text-center d-none d-xs-none" scope="col">Location</th>

基本上,您可以向我展示一个在将浏览器调整为移动设备时隐藏表格列的示例吗？谢谢您的帮助!

由于.page-header该类已在Bootstrap 4中弃用,有人如何创建与Bootstrap 3 .page-header类相同样式的页眉？

我用Vuejs来开发我的前端,现在我必须设计它.我遇到了 Bootstrap-vue.使用Bootstrap 4或Bootstrap-vue会更好.它们是相同的还是使用Bootstap-vue是有利的.

我使用Bootstrap 4.5并bg-dark在我的 HTML 模板中使用。我想实现一个“亮/暗”开关。

所以，Bootstrap 有一个bg-lightcss 类，但我不确定当前的方法如何使用它。让我澄清一下我的困惑：

1. 一旦“开关”打开，我是否应该替换所有出现的bg-darkwith bg-light？

2. 如果我想稍微修改的颜色bg-light和bg-dark，是“主题化”的正确方法？我找不到任何示例来覆盖这些变量（通过 SASS），除了在我的 CSS 中手动覆盖它们，例如.bg-dark { ... }

非常感谢！

我正在尝试重新设置/重新格式化Bootstrap 4中的工具提示,而原始的方式似乎不再起作用了.目前我这样做:

.tooltip-inner {
    background: #7abcff; 
    background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); 
    background:    -moz-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); 
    background:   linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); 
    color: #fff;
    font-family: 'Roboto', Arial, sans-serif;
}
.tooltip.top .tooltip-arrow {
    border-top-color: #7abcff;
}

.tooltip-inner工作正常,但.tooltip.top .tooltip-arrow不是; 它保持黑色.我假设.tooltip.top是底部对齐工具提示顶部的箭头.

任何帮助将不胜感激

我正试图在两个卡片组之间增加空间.我正在使用bootstrap 4 alpha 6.我不知道为什么mt-20在第二张卡牌上使用它不会这样做.我已经尝试将它们包装成行并执行它,但是也没有这样做:

<div>
<div class="container">
            <div class="card-deck">
                <div class="card text-center">
                    <div class="card-block">
                        <h4 class="card-title">Permits</h4>
                        <p class="card-text">
                            Apply for parking permit<br />
                            View existing permit requests<br />
                            Activate Visitor permits<br />
                        </p>
                    </div>
                    <div class="card-footer">
                        @Html.ActionLink("Permits", "Index", "Home", new { Area = "Permit" }, new { @class = "btn btn-primary" })
                    </div>
                </div>

                <div class="card text-center">
                    <div class="card-block">
                        <h4 class="card-title">Vehicles</h4>
                        <p class="card-text">
                            View and manage your vehicles
                        </p>
                    </div>
                    <div class="card-footer">
                        @Html.ActionLink("My Vehicles", "Index", "Vehicle", null, new …

为什么我不能在使用bootstrap 4在角度4中调整大小到移动屏幕时切换导航栏.我将它包含在脚本和样式的角度cli中,来自bootstrap的节点模块.我的代码中是否缺少某些内容？请检查下面.有什么不对？请帮忙

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Dashboard</a>
  <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <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="#">Settings</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Help</a>
      </li>
    </ul>
    <form class="form-inline mt-2 mt-md-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

.angular-cli.json

 "styles": …