标签: twitter-bootstrap-4

阿罗哈，

我正在（仍然）在引导程序网站上工作，并希望将（插图！）阴影应用于轮播。HTML 看起来像这样：

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="..." alt="Third slide">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

试图通过申请

.carousel-item {
    box-shadow: inset 0 0 20rem …

我使用bootstrap 4 alpha 6版本.在我的页面中,我有几个崩溃块.我想在用户打开/关闭该块时更改图标.因为我有几个这样的块我使用了类,但它没有用.我做错了什么？PS当我在JS中使用id工作正常,但正如你所看到我有几个崩溃块并且不想"复制和粘贴".

HTML:

<div class="card">
    <div class="card-header">
         <div class="d-flex align-items-center justify-content-between">
              <button data-toggle="collapse" data-target="#collapse-projects" aria-expanded="false" aria-controls="collapse-projects">
                    <i class="fa fa-eye" aria-hidden="true"></i>
              </button>
         </div>
    </div>
    <div class="card-block">
        <div class="collapse" id="collapse-projects">
           ***SOME CONTENT***
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
         <div class="d-flex align-items-center justify-content-between">
              <button data-toggle="collapse" data-target="#collapse-tasks" aria-expanded="false" aria-controls="collapse-tasks">
                    <i class="fa fa-eye" aria-hidden="true"></i>
              </button>
         </div>
    </div>
    <div class="card-block">
        <div class="collapse" id="collapse-tasks">
           ***SOME CONTENT***
        </div>
    </div>
</div>

JS:

$(document).ready(function () {
            $('.collapse')
                .on('shown.bs.collapse', function() {
                    $(this)
                        .parent()
                        .find(".fa-eye")
                        .removeClass("fa-eye")
                        .addClass("fa-eye-slash");
                })
                .on('hidden.bs.collapse', …

我正在尝试学习如何使用 jQuery 切换 HTML 文本，这本身很容易，但我希望文本自动隐藏，直到用按钮单击它。我查了一下，我找不到如何做到这一点。我认为这应该很容易，而且我有这个部分

<h4 id="text1">This is some toggleable text</h4>

$(document).ready(function(){
    $("#button1").click(function(){
      $("#text1").toggle();
    });
});

作为常规切换可以正常工作，但这会将文本留在那里，直到第一次点击。

代码笔：https ://codepen.io/anon/pen/bYYeEB

我一直在使用Bootstrap 3构建Web应用程序。在那期间，我使用面板对用户元素进行了分组-显示数据，简单的编辑表单等。

我将使用带有a dl的标签和作为a dt的值dd。同样，我将使用带有与字段内联的标签的表单

<div class="panel-body">
  <dl class="dl-horizontal">
    <dt>Name</dt>
    <dd>Value</dd>
  </dl>
</div>

我可以dl-horizontal在面板中使用就好了。

但是，现在，随着Bootstrap 4面板的普及，dl-horizontal该类似乎没有效果。

<div class="card-body">
  <div class="card-text">
    <dl class="dl-horizontal">
      <dt>Name</dt>
      <dd>Value</dd>
    </dl>
  </div>
</div>

更新 删除对表单的引用。我最初也有问题form-horizontal，Bootstrap4处理水平形式的方式有所不同

我试图将导航栏项目向右浮动而不是向左浮动，这是我使用过的floats float-right类的 html ，我认为pull-right已弃用，因此任何可以提供帮助的人都会受到赞赏

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

          <div class="collapse navbar-collapse mr-auto" id="navbarSupportedContent">
            <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</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <div class="dropdown-divider"></div>
                  <a …

我是 Bootstrap 4 的新手，在 Bootstrap 3 的早期我们使用类“center-block”，现在我无法在新版本中找到它。