标签: twitter-bootstrap-4

我正在使用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>

有谁知道如何用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>

早上好,我想设置为使用引导我尽量提供不同的选择这里不同宽度的输入的直列形式:http://v4-alpha.getbootstrap.com/components/forms/.

这就是我去的地方:

<div class="container">
    <div class="row">
        <div class="col-xs-1">
            <label for="exampleInputName2" class="col-form-label">Name</label>
        </div>
        <div class="col-xs-2">
            <input type="text" class="form-control" placeholder=".col-xs-2">
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder=".col-xs-3">
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" placeholder=".col-xs-4">
        </div>
    </div>
</div> 

但我没有使用任何表单类或标签.

----------------编辑------------------------

更具体地说,如何在Bootstrap 4网站中指定此示例中的标签和输入的宽度？

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-primary">Send invitation</button>
</form>

任何好的和简单的例子都会受到欢迎.

谢谢

西尔

我在我的布局中使用了bootstrap v4卡,不幸的是,这些图像在Internet Explorer 11中失真.似乎IE完全忽略height: auto了img-fluid类所给出的属性.是否有必要对卡片图像应用自定义高度？但是,这些卡在Chrome和Firefox中完美呈现.有趣的是,如果我将引擎更改为IE 10(在F12控制台中),问题就消失了.

由于img-fluid没有用卡片包裹的类的图像是按照原始比例显示的,我认为问题对应于卡片布局.

   <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="img/1.jpg" alt="Step 1" width="600" height="400" />
            <div class="card-block">
              <h3 class="card-title">Step 1</h3>
              <p class="card-text">Text 1</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="img/2.jpg" alt="Step 2" width="600" height="400" />
            <div class="card-block">
              <h3 class="card-title">Step 2</h3>
              <p class="card-text">Text 2</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="img/3.jpg" alt="Step 3" width="600" height="400" />
            <div class="card-block"> …

如何使导航项目的背景完全充满颜色,而不仅仅是其中的一部分？

这是我尝试使用Bootstrap药丸,但它没有做到这一点.此外,我尝试了自己的CSS,但它和药丸一样.

总而言之,我如何使我的导航栏(在图像中)看起来像这个,仅关于导航项CSS的背景颜色.

更新:添加了HTML和CSS代码

我的代码:HTML

            <button class="navbar-toggler navbar-toggler-right" 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>

            <a class="navbar-brand" href="#"><i class="fa fa-paw" aria-hidden="true"></i> Purrfection Shop</a>



            <!--<i class="fa fa-home" aria-hidden="true"></i>
            <i class="fa fa-sign-in" aria-hidden="true"></i>
            <i class="fa fa-sign-out" aria-hidden="true"></i>-->


            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto nav-pills">
                    <li class="nav-item">
                        <a class="nav-link" href="#jumbotron">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about-container">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#footer">Contact</a>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto nav-pills">
                    <li …

我有一个带有下一个/上一个控件的 BS 4 旋转木马，目前可以使用。我有一个浅色背景，所以我想更改控件的颜色（当前为白色）。

HTML：

<div id="carouselQuotes" class="carousel slide quotecaru" data-ride="carousel">
<ol class="carousel-indicators">
    <li data-target="#carouselQuotes" data-slide-to="0" class="active"></li>
    <li data-target="#carouselQuotes" data-slide-to="1"></li>
    <li data-target="#carouselQuotes" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
    ... carousel items ...
</div>
<a class="carousel-control-prev" href="#carouselQuotes" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselQuotes" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

更改指示器的颜色很容易，因为只需将颜色设置为它们的背景即可。但是为上一个/下一个控件设置背景颜色或颜色并没有改变实际控件图标的颜色。

我发现图标是通过背景图像 SVG 设置的。其中有一部分说明了填充颜色：

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

我试过

.carousel-control-prev-icon, .carousel-control-next-icon {
    fill: …

是否可以在Bootstrap 4中的卡组中混合使用不同大小的卡.我想在左侧尺寸上有一张大卡(双倍宽度),在右侧有两张较小的卡,三者的高度相同.

<div class="container">
  <div class="row">
    <div class="card-group">
        <div class="card col-md-6">
          <div class="card-block">
            <h4 class="card-title">Card 1</h4>
            <p class="card-text">Text 1</p>
          </div>
        </div>
         <div class="card col-md-3">
          <div class="card-block">
            <h4 class="card-title">Card 2</h4>
            <p class="card-text">Text 2</p>
            <p class="card-text">More text 2</p>
            <p class="card-text">More text 2</p>
          </div>
        </div>
        <div class="card col-md-3">
          <div class="card-block">
            <h4 class="card-title">Card 3</h4>
            <p class="card-text">Text 3</p>
          </div>
        </div>
      </div>
    </div>
  </div>

我有两列布局,如下所示:

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4">
    </div>
 </div>

如果我设置position:sticky到侧边栏列,我会得到侧边栏的粘性行为:https://codepen.io/marcanuy/pen/YWYZEp

CSS:

.sticky {
  position: sticky;
  top: 10px;
}

HTML:

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4 sticky">
    </div>
 </div>

但是当我将sticky属性设置为仅位于侧边栏中的菜单时,相关文章部分正常滚动并获得菜单div的粘滞行为,它不起作用:

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4">
       <div class="menu sticky">
       </div>
    </div>
 </div>

这是第一个使用粘性行为滚动整个侧边栏的示例的截屏视图,然后将sticky属性更改为不起作用的菜单:

Bootstrap 4 推荐使用sticky属性作为对Affix jQuery插件的删除支持:

删掉了Affix jQuery插件.我们建议使用位置:粘性polyfill.

我测试过:

• Firefox 47.0 css.sticky.enabled=“true”以下about:config …