标签: twitter-bootstrap-4

下面是我的bootstrap 4代码

 <nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded ">
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">

        <li class="nav-item">

          <a class="nav-link " >
            <span  class="icon icon18 icon-upload"></span>
            Input Data From Prior Month
            </a>
        </li>
        <li class="nav-item">
          <a class="nav-link " >
            <span  class="icon icon18 icon-excel-file"></span>
            Export to Excel
          </a>
        </li>
      </ul>
      <span class="navbar-text color-blue">
        *Data Automatically pulled from sources
      </span>
    </div>
   </nav>

这里为bootstrap 3提供了各种示例 如何降低Bootstrap 3中的导航栏高度？ 但是它们似乎都没有用于bootstrap 4,任何人都可以帮助这个吗？

在https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row的Bootstrap文档中的这个页面上,他们给出了这个例子:

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

这将创建两行,每行包含两个大小相等的列.但是,您只需创建两行即可实现此目的:

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
</div>

使用.w-100CSS类和仅创建两行之间有什么区别吗？

col-md-12每个班级我都有两列.

在桌面视图中,它们应显示为:

Col **1** 
Col **2**

在移动视图中,应显示如下:

Col **2**
Col **1**

甚至可以通过Bootstrap的列排序来实现这一点吗？

我目前的代码:

<div class="row">
    <div class="col-xs-push-12 col-md-12">
        Col 1
    </div>
    <div class="col-xs-pull-12 col-md-12">
        Col 2
    </div>
</div>

如何在Bootstrap 4中实现多项旋转木马？文档提到了多个旋转木马,但没有提到带有多个项目的旋转木马.

如何将列中的文本垂直居中(bootstrap 4)？结构基本,见:

<div class="row">
    <div class="col-md-6">
        <span>Text to center</span>
    </div
</div>

Ty伙计们!

我正在使用Bootstrap 4并创建了一个带有.card-header和.card-block的卡,如下所示:

<div class="card">
    <div class="card-header">
        <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
            card header
        </a>
    </div>
    <div id="test-block" class="card-block">
        card block
    </div>
</div>

我希望能够单击卡片标题来切换卡块.我尝试过使用Bootstrap的崩溃机制(你会注意到data-toggle="collapse"卡头中的内容).它有效 - 但动画非常不稳定.

我无法弄清楚为什么.这是codepen的一个例子.

如何让我的按钮透明？我一直在尝试使用.btn-transparent,但似乎无法让它工作.按钮只是变灰了.

<p>
    <!-- Search Button -->
    <div class="container3">
        <div class="btn-group ">
            <button type="button" class="btn btn-primary-outline">SEARCH</button>
            <button type="button" class="btn btn-primary-outline">
                <span class="glyphicon glyphicon-menu-right"></span>
            </button>
        </div>
    </div>
</p>

在最新版本的Bootstrap(当前版本提出问题时bootstrap@4.0.0-alpha.5)有3个不同的文件和标准的文件:

1. 自举flex.css
2. 自举grid.css
3. 自举reboot.css
4. bootstrap.css

前3个文件是bootstrap.css(#4)的扩展名吗？

我可以想象,bootstrap-flex使用CSS Flexbox的功能bootstrap-grid可能是旧的和已经存在的方式,但是呢bootstrap-reboot？

我必须包含哪一个(特别是如果我在Angular 2中使用ng-bootstrap)？

有谁知道如何用vue 2.0打开bootstrap模式？在vue.js之前,我只需使用jQuery打开模态:$('#myModal').modal('show');

但是,我应该在Vue中采用这种方法吗？

谢谢.

我正在使用bootstrap 4 alpha,似乎按钮上的光标已被删除而不是锚标签.在bootstrap站点上的示例.

https://v4-alpha.getbootstrap.com/components/buttons/

在我的应用程序中,我有一个表单,有两个按钮,一个是发布到表单,另一个是重定向到另一个页面.输入不显示光标,但锚点显示.我知道我可以创建一个自定义的css类,但有没有理由将其删除,或者它是当前alpha版本的问题？

<input type="submit" value="Sign In" class="btn btn-primary" />
<a role="button" href="@Url.Action("Register", "Account")" class="btn btn-secondary">Register Now</a>