标签: bootstrap-4

我有一个使用bootstrap 4的角度应用程序.我有一个粘贴到顶部的导航栏,我想添加填充浏览器中剩余空间的内容.除了顶部的导航栏,我有另一个div本身包含页眉和页脚内容.在页眉和页脚之间,我有一个主内容部分,我希望该部分(#two在我下面的示例中)填充所有空白区域.

我以为我可以使用css flexbox来完成这个,但是当我进入bootstrap世界时,我的简单非引导flexbox示例似乎什么也没做.我正在使用这些文档试图解决这个问题.

我认为使用align-self-stretch应该有助于实现这个目标,但它看起来像包含元素可能正在调整自己的大小足以容纳我的#outer内容,因此没有扩展Flexbox要完成.我试着天真地只是添加height:100%样式到包含div只是为了尝试伸展,但这似乎没有帮助.

我根据@ ZimSystem的响应创建了这个plunker示例.他的代码示例似乎完全按照我的意愿工作,但当我尝试将更改分成我的简单角度代码时,柔性拉伸没有发生.我不确定我在转换中打破它是做什么的.

这是我目前正在查看的整个角度分量:

<div id="outer" class="d-flex flex-column flex-grow">
    <div id="one" class="">
        header content <br>
        another line <br>
        And another
    </div>
    <div id="two" class="bg-info h-100 flex-grow">
        main content that I want to expand to cover remaining available height
    </div>
    <div id="three" class="">
        footer content
    </div>
</div>

这是显示导航栏和注入点的应用程序容器:

<div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        <a class="navbar-brand" href="#">
            <h1 class="navbar-brand mb-0">My App</h1>
        </a> …

我在许多论坛上看到,在测试版本的bootstrap 4之后,select和multiselect的问题已得到解决.

不幸的是,我无法像(bootstrap 3)中的(bootstrap 3)那样显示多选.

Bootstrap 3代码段

$('select').selectpicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/js/bootstrap-select.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Bootstrap 4片段

$('select').selectpicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

我正在开发一个简单的 react-spring 启动应用程序，但由于 GitHub 问题，我使用 IntelliJ 重新创建了我的应用程序启动文件，并使用以前应用程序的 package.json 文件的依赖数据安装了节点模块。

如果我使用折叠导航栏（汉堡栏 -> 在移动视图中折叠的响应式导航栏）并单击汉堡按钮查看导航链接，则会出现以下错误。但是所有这些事情在之前的申请中都很顺利。

TypeError: Cannot convert object to primitive value
HTMLDivElement.<anonymous>
C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/js/src/collapse.js:346
  343 |   ...typeof config === 'object' && config ? config : {}
  344 | }
  345 | 
> 346 | if (!data && _config.toggle && /show|hide/.test(config)) {
      | ^  347 |   _config.toggle = false
  348 | }
  349 | 
View compiled
Function.each
C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/webapp/front-end/node_modules/jquery/dist/jquery.js:381
  378 | if ( isArrayLike( obj ) ) {
  379 |     length = obj.length; …

pointer:cursor在bootstrap 4中是否有任何css类或属性专门用于按钮或链接？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-success">Sample Button</button>

我正在尝试使用Bootstrap 4创建一个类似于屏幕截图的布局,但是我在修复侧边栏并同时实现此布局时遇到了一些问题.

以一个基本的例子为例:

<div class="container">
  <div class="row">
    <div class="col-m-4" id="sticky-sidebar">
      Sidebar
    </div>
    <div class="col-m-8" id="main">
      Main Area
    </div>
  </div>
</div>

我可以获得这种布局,但是一旦我声明,事情变得棘手:

.sidebar {
position: fixed // or absolute
}

一旦我使侧边栏变粘,主 div开始出现在侧边栏后面而不是旁边.当然,可以宣布一些余量并将其推回原来的位置,但这会使响应性变得复杂.

我觉得我错过了什么,我读了Bootstrap 4文档,但我找不到一种简单的方法来实现这种布局.

有没有办法从水平而不是垂直折叠Bootstrap Collapse插件？看看代码这个能力似乎没有内置,但我希望我只是遗漏了一些东西......

任何帮助将不胜感激.谢谢!

我使用bootstrap 3.0来创建一个网站.我是bootstrap的新手.我想要的是,当浏览器尺寸特别小时我希望图像在div的中心我有这个代码.

<div class="col-lg-10 ccol-lg-offset-1 col-md-12 col-sm-12 ">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2 …

我正在使用bootstrap 4 alpha 3.
我想将卡水平居中在整个页面中间.

Preview / link: http://codepen.io/vaibhavsingh97/full/VjRAXW

我已经尝试了bootstrap 4示例页面上列出的所有不同选项.

我怎样才能做到这一点？

我复制了正式的Bootstrap 4示例用于下拉菜单,但它不起作用,没有任何内容被删除.

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu" aria-labelledby="dropdown01">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

我显然在这里错过了一些愚蠢的东西.我有白色背景的图像,所以我希望能够编辑Bootstraps Carousel上的箭头,以便它们可见.如此多的改变箭头的颜色(不像我做的那样背景).

CSS

.carousel-control-prev-icon, .carousel-control-next-icon {
    height: 100px;
    width: 100px;
    outline: black;
    background-color: rgba(0, 0, 0, 0.3);
    background-size: 100%, 100%;
    border-radius: 50%;
    border: 1px solid black;
}

轮播HTML

<div class = 'col-md-9'>

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <img class="d-block img-fluid" src="carousel/Bars%20and%20Dots.jpg" alt="First slide" class = 'img-responsive'>
            </div>

            <div class="carousel-item">
                <img class="d-block img-fluid" src="carousel/murial.jpg" alt="Second slide" class = 'img-responsive'>
            </div>

            <div class="carousel-item"> …