标签: bootstrap-4

我使用堆叠丸内div.问题是,有时div含有大量药片.如何为其添加滚动条？

<div class="row col-md-2">
<ul class="nav nav-pills nav-stacked">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>
</div>

我可以为div添加一个类来使堆叠的药片可滚动吗？

在Bootstrap 4中,font-size默认使用em或rem用于字体.

如何增加font-size所有视口大小？因为每个元素看起来很小.

在文档和Bootstrap v4 (这里)的问题中,我看不到任何支持计划flex-grow,例如这样的语法:

<div class="d-flex">
      <div  class="flex-grow">
        I use all the space left
      </div>
      <div>
        I am a small text on the right
      </div>
</div>

这里是我想要创建的布局示例:

导出按钮始终在右侧,导航按钮占用了所有空间,因此看起来很干净.

是否有可能建立这样的布局？也许不建议？当然,有一些使用CSS的解决方法,但我正在寻找一个干净的解决方案,理想情况下只使用Bootstrap类名来保证一致性.

想知道是否有人有关于如何增加下拉宽度的任何提示？

我有一行包含两个带有一点javascript的列,在选中时会向下和向下滑动下拉列表.我遇到的问题是,我无法想象如何在选择时增加下拉宽度,理想情况下,下拉列表将与列大小匹配.但是发生的事情是,下拉宽度与下拉列表中的文本大小相同,是否有人建议如何增加下拉宽度以匹配列大小？

<div class="row question">
        <div class="dropdown">
            <div class="col-md-6" data-toggle="dropdown">
                First column
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                </ul>
            </div>
        </div><!-- end of the dropdown -->
        <div class="dropdown">
            <div class="col-md-6" data-toggle="dropdown">
                second column
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert …

在flexbox的bootstrap 4.1文档页面上,有几个bd-highlight使用该类的示例.例如:

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

有什么用bd-highlight？
这个类似乎没有任何文档.

我无法更改bootstrap模式的边界半径.

.modal{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px; 
}  

我该怎么办？

如何在导航栏中创建100%的搜索输入宽度？

该领域的宽度有限:

<nav class="navbar navbar-light navbar-dark bg-inverse">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav 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="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>

  <ul class="nav navbar-nav pull-xs-right">
    <li class="nav-item">
      <form class="form-inline ">
        <input class="form-control" type="text" placeholder="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">User Name</a>
    </li>
  </ul>
</nav>

这是小提琴:

https://jsfiddle.net/Dieselnick/tdoz2o4d/

我正在使用React和bootstrap开发Web应用程序.当应用按钮onClick时,我花了很多时间让我的页面重定向到另一个.如果在一个href后,我不能去另一页.

那么请你告诉我是否需要使用反应导航或其他方法使用Button onClick导航页面？

import React, { Component } from 'react';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink  } from 'reactstrap';

class LoginLayout extends Component {

  render() {
    return (
 <div className="app flex-row align-items-center">
        <Container>
     ...
                    <Row>
                      <Col xs="6">                      
                        <Button color="primary" className="px-4">
                            Login
                         </Button>
                      </Col>
                      <Col xs="6" className="text-right">
                        <Button color="link" className="px-0">Forgot password?</Button>
                      </Col>
                    </Row>
               ...
        </Container>
      </div>
    );
  }
}

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

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

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

谢谢.

我试图让container-fluid第二个row伸展到剩余的高度,但我找不到办法做到这一点.

我已经尝试设置align-items/align-self到stretch,但也不能工作.

以下是我的代码结构:

<div class="container-fluid"> <!-- I want this container to stretch to the height of the parent -->
    <div class="row">
        <div class="col">
            <h5>Header</h5>
        </div>
    </div>
    <div class="row"> <!-- I want this row height to filled the remaining height -->
        <widgets [widgets]="widgets" class="hing"></widgets>
        <div class="col portlet-container portlet-dropzone"> <!-- if row is not the right to stretch the remaining height, this column also fine -->
            <template row-host></template>
        </div>
    </div>
</div>

我正在使用Bootstrap 4 …