标签: twitter-bootstrap-4

bootstrap 4是否有内置的水平分隔线？我可以做这个,

<style type="text/css">
.h-divider{
 margin-top:5px;
 margin-bottom:5px;
 height:1px;
 width:100%;
 border-top:1px solid gray;
}
</style>

但我想使用内置的bootstrap css,我无法在文档中的任何地方找到它,也许我错过了它.

我正在尝试在bootstrap 4中实现卡片功能,以使我的所有卡片都具有相同的高度.

bootstrap提供的示例显示4张漂亮的卡片,但无论是视口,它都是4行卡片.请在此处查看codeply .

这对我来说没有意义,因为我认为,为了让你的内容看起来还不错,你需要将卡的最小尺寸缩小.

然后我尝试添加一些视口类来打破屏幕大小,但是一旦添加了div,卡片组就不再适用,因此不会使卡片的高度相等.

我怎样才能完成这项工作？这是缺少的功能,将在Bootstrap 4的完整版本中解决吗？

这是小提琴:https://jsfiddle.net/crrm5q9m/

<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, …

我正在尝试将我的应用程序从bootstrap 3.3.7迁移到Bootstrap v4.0.0-alpha.6.

当我使用NuGet将Bootstrap v4.0.0-alpha.6下载到我的项目中时,除了bootstrap.css之外,我还看到了bootstrap-reboot.css和bootstrap-grid.css.

我试图通过文件了解他们的目的但是,我没有得到清晰的图片.

这两个css文件有什么用？我真的需要将它们包含在我的项目中吗？

Bootstrap v4删除了.btn-group-justified该类,请参阅https://github.com/twbs/bootstrap/issues/17631

如何证明按钮的合理性:

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>

我创建了一个带有Bootstrap 4 alpha 6的导航栏,左侧有一个大品牌/图标,还有2个navbar-nav,带有图标右侧的链接.一个导航有链接,另一个导航有图标.除了一件事,它正如我想要的那样工作.

我希望2个导航栏出现在图标右侧的2个单独的行中.像这样:

------------------------------------------------------
               link link link link  
brand-icon -------------------------------------------
               icon icon icon
------------------------------------------------------

移动版仍将像现在一样垂直显示链接.我用flexbox尝试了几种不同的东西,但无法让它工作.

这是我的代码:

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></a></h1>
        <div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Product</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item"> …

我正在尝试将表单与中心对齐并保持响应.我尝试了几种方法但没有成功.我试图将所有文本和表单集中在一起.我正在使用Bootstrap v4.我不确定这是否有帮助.

HTML:

<section id="cover">
     <div id="cover-caption">
         <div id="container">
             <div class="col-sm-10 col-sm offset-1">
                 <h1 class="display-3">Welcome to Bootstrap 4</h1>
                 <div class="info-form">
                 <form action="" class="form-inline">
                    <div class="form-group">
                        <label class="sr-only">Name</label>
                        <input type="text" class="form-control" placeholder="Jane Doe">
                    </div>
                    <div class="form-group">
                        <label class="sr-only">Email</label>
                        <input type="text" class="form-control" placeholder="jane.doe@example.com">
                    </div>
                    <button type="submit" class="btn btn-success ">okay, go!</button>
                </form>
                </div>
                <br>

                <a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">&darr;</a>
             </div>
         </div>
     </div>
 </section>

CSS:

html,
body{
 height: 100%;
}

#cover {
  background: #222 url('../img/stars.jpg') center center no-repeat;
  background-size: cover;
  color: white;
  height: …

我在Bootstrap 4:Bootply链接中进行了以下设置

其中带有"Supplier"文本的元素应该是垂直居中的,我有不同的行,代码相同,我希望它们居中.没有解决方案似乎对我有用.

有人可以在这里找到我做错了什么,并指出我正确的方向？

谢谢.

如何使列占据浏览器w引导4的100%高度？

请参阅以下内容:https://codepen.io/johnpickly/pen/dRqxjV

注意黄色div,我需要这个div /列占据100%的高度...有没有办法让这个发生而不必让所有父div的高度为100%？

谢谢

HTML:

<div class="container-fluid">
  <div class="row justify-content-center">

    <div class="col-4 hidden-md-down" id="yellow">
      XXXX
    </div>

    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">
      Form Goes Here
    </div>
  </div>
</div>

我知道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>

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

我正在尝试重新设置/重新格式化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是底部对齐工具提示顶部的箭头.

任何帮助将不胜感激