标签: twitter-bootstrap-4-beta

Bootstrap 4使用该类.collapsing在打开/关闭它时为.collapse-element的宽度/高度设置动画.不幸的是,通过将宽度/高度作为内联样式添加到元素并在过渡的开始和结束时添加和删除类来实现实际更改.因此,很难自定义转换(例如,更改时序或淡入/淡出而不是宽度转换).

到目前为止我尝试过的:

• 将css属性添加transition:none到.collapsing类中:这确实有助于消除转换,但打开/关闭仍然会延迟转换时间,因为在实际更改发生之前,类仍会添加几毫秒.
• 将自定义css关键帧添加到.collapsing类中:由于使用相同的类进行打开和关闭,因此会显示相同的动画.

有没有办法改变过渡,例如淡入/淡出(不透明度的变化),还是我必须构建bootstrap.js的自定义版本？

通过遵循有关表单验证的Bootstrap文档，我可以验证我的表单，但是我还没有找到一种方法使特定字段（例如，文本输入或复选框）不会显示验证反馈，而所有其他字段都会显示。

我的意思是：如何使某些特定字段在验证表单时跳过获取:valid或:invalid伪类，或者即使确实将伪类应用于它们，我如何才能将它们从视觉上跳过，使其与其他字段一样？

也许有一类与之相反的类.was-validated可以应用于特定领域？

引导程序版本：v4.0.0-beta.3

我正在为我的应用程序使用角度4和bootstrap 4 beta 2和ng-bootstrap,并使用ng-bootstrap.

我已经从bootstrap文档示例中添加了导航栏.

代码如下所示:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <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</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

我还在angular-cli.json中添加了bootstrap样式.该代码如下所示:

 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css", …

我是新手。我知道我可以为Bootstrap 4分配不同的字体，例如默认字体，

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

我想知道如果我尝试用两个字体配对构建一个网站，

font-family: "Roboto", "Open Sans";

上面的代码将如何影响Bootstrap 4的元素。哪些元素将获得Roboto或Open Sans。

我得到了Bootstrap 3的工作,但相同的代码在Bootstrap 4中不起作用.

基本上,我正在尝试为DIV创建一个水平滚动,这是一个工作JSFIDDLE for Bootstrap 3(我不想要):DEMO

Bootstrap 4的相同代码不起作用!这是JSFiddle for Bootstrap 4:https://jsfiddle.net/6kvw2q5h/

HTML

<div class="live__scroll">
  <div class="row text-center">
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    </div>
</div>

CSS

.live__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.live__scroll .live__scroll--box {
  display: inline-block;
  float: none;
  padding: 15px;
  border: 1px solid red;
}

我究竟做错了什么？我的智慧结束了.