标签: twitter-bootstrap-4

我已经成功地将一行文本与图像(小提琴)对齐.

<div class="profile-details-wrapper">
  <img class="profile-picture" src="http://placehold.it/50x50" />
  <span class="profile-details">
    username
  </span>
</div>

但是,当我尝试添加另一行文本时,它会包裹在图像下(小提琴).

<div class="profile-details-wrapper">
  <img class="profile-picture" src="http://placehold.it/50x50" />
  <span class="profile-details">
    username
    <br />
    username
  </span>
</div>

如何使多行文本超出旁边图像的高度,但不会在其下面换行？

奖金问题:我如何垂直对齐呢？

我正在使用Bootstrap 4 alpha 6,并尝试使用flexbox垂直居中等高卡的内容.我已经使用了h-100util类来使卡与列完全一致.

问题是我希望每张卡的内容在中间对齐(垂直居中).我尝试使用.align-items-center行中的类,它可以使卡片居中,但随后卡片的高度不再相等......

HTML

<div class="container">
    <div class="row align-items-center bg-faded">
        <div class="col-md-2">
            <div class="card card-block h-100">
                I have a lot of content that wraps on multiple lines..
            </div>
        </div>
        <div class="col-md-6">
            <div class="card card-block h-100">
               I have a line of content.<br>
               And another line here..
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-block h-100">
                I have a little bit.
            </div>
        </div>
    </div>
</div>

演示问题

我有以下由 bootstrap 4 提供支持的 Flexbox 表单。

https://jsfiddle.net/kkt0k2bs/1/

我有一个媒体查询来调整表单元素的大小以缩小显示。

在较大的显示器上，我希望表单项内联，但在较小的屏幕上，我希望表单元素堆叠且为 100%。

输入在较小的显示器上不会达到 100% 宽度...我怎样才能使代码在较小的显示器上获得 100% 的宽度？

HTML：

<div class="form-mod">
        <form class="form-inline justify-content-center d-inline-flex">
            <div class="form-group">
                <div>
                    <input type="text" name="email" value="" placeholder="Enter your email..." class="form-control">
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary">Request an Invite</button>
            </div>
        </form>
</div>

CSS：

.form-mod {
  display: inline-block;
  text-align: center;
  padding: 16px 32px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3;
  box-shadow: 0 20px 63px 0 rgba(0,0,0,.6);

  [type="text"] {
    width: 260px;
    margin-right: 16px;
    border-radius: 100px;
    padding-left: 18px;
    border-radius: …

对于所有浏览器尺寸，此导航栏都是折叠的。我想知道如何在菜单外单击时关闭展开的菜单。所以切换按钮不是关闭它的唯一方法。

我已经尝试了一些针对 Bootstrap 3 的建议，其中之一是下面包含的 Javascript 代码，但它们似乎不起作用。

说我不太了解 Javascript 或 PHP 可能很有用，但我愿意接受您提出的任何建议。谢谢！

<nav class="navbar navbar-inverse bg-faded">
              <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <span class="navbar-text">&nbsp;</span>
              <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav flex-column">
                  <li class="nav-item active">
                    <a class="nav-link" href="http://touruapp.com/">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="http://touruapp.com/about-us-2/">About Us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="http://touruapp.com/contact-2/">Contact</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="http://touruapp.com/support-2/">Support</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Legal
                    </a>
                    <div …

我有一个使用 Bootstrap 4 的网站。我正在尝试创建一个占据整个屏幕高度的布局。我认为 Bootstrap 4 中新的“flex”网格方法应该支持这一点。也许我做错了？此时，我的应用程序的高度仅填充内容所需的高度。此时，如此Bootply所示，可用区域的整个高度未填充。我的代码如下所示：

<div class="container-fluid">
  <div class="row" style="border-bottom:1px solid #000;">
    <div class="col-12">
      <ul class="list-inline">
        <li class="list-inline-item"><i class="fa fa-star"></i></li>
        <li class="list-inline-item"><h2>My Name</h2></li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="col-3">
      <div class="row">
        <div class="col-3" style="background-color:#fff;">
          <div class="text-center">
            <i class="fa fa-users"></i>
            <div>Users</div>
          </div>

          <div class="text-center" style="color:orange;">
            <i class="fa fa-files-o"></i>
            <div>Files</div>
          </div>

          <div class="text-center">
            <i class="fa fa-cubes"></i>
            <div>Containers</div>
          </div>

          <hr>

          <div class="text-center">
            <i class="fa fa-comments"></i>
            <div>Feedback</div>
          </div>      

          <div class="text-center">
            <i class="fa fa-question-circle"></i>
            <div>Help</div>
          </div>
        </div>

        <div class="col-9" style="background-color:#eee;"> …

我有一个Bootstrap使我的选项菜单可视化的方式的问题.看看截图:

我不知道是什么原因造成的.我没有在这个特殊情况下使用标签,但他们也没有帮助.

这是代码:

        <nav class="sidebar col-sm-4 col-md-3 d-inline align-self-auto">
        <div class="form-group">
            <select class="custom-select mt-2">
                <option selected>?????</option>
                <option value="1">???</option>
                <option value="2">????</option>
                <option value="3">????</option>
            </select>

请帮我这个,因为我想要一个漂亮的网站.我正在使用Bootstrap 4.0.0.b我还应该提到我正在使用gulp来编译我的CSS.

提前致谢.

Bootstrap 3 单个 ul 中的多列未正确浮动基本上是一个问题，其答案涵盖了 bootstrap 3。我现在尝试了 bootstrap 4 中的解决方案，它大部分都有效，但有些东西看起来并不干净。

我做了一个的jsfiddle证明问题在这里与下面的HTML代码：

<div class="col-12 container" style="height: 350px;">
  <ul class="list-unstyled row">
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
  </ul>
</div>

如您所见，第一个和最后一个项目仍然具有圆形边框：

我试图通过以下方式解决这个问题：

• 添加边框类以尝试强制使用矩形边框（无效）
• 使用list-group-flush以除去弯曲边界完全（铅的第一个项目缺少在顶部的杆和最后一个丢失在导致另一外观不洁净底部的巴）
• 使用list-group-flusha …

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <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 class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" …

我想使用Bootstrap 4和Angular 2创建一个导航栏,当浏览器的宽度达到某个值时,它会在按钮上折叠他的内容.我实现了这一点,当导航栏崩溃时,我可以看到包含导航栏中元素的按钮,但是这个按钮不起作用.如何在不使用jquery的情况下解决这个问题？我试图使用ng-bootstrap.

在图像中,您可以在导航栏折叠时看到按钮.

我的代码到目前为止:

<nav class="navbar navbar-expand-md fixed-top navbar-dark custom-nav">
  <span class="navbar-brand mb-0 h1">Partes vehículos</span>

  <button class="navbar-toggler" type="button">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse">
    <div class="navbar-nav ml-auto">
      <a class="nav-item nav-link active" *ngIf="authService.isLoggedIn()">
        Usuario: {{ authService.currentUser.name }}
      </a>
      <a class="nav-item nav-link active" *ngIf="authService.isLoggedIn()">
        Perfil: TODO
      </a>
      <button class="nav-item btn btn-outline-warning ml-3 mr-3">Más opciones</button>
      <a class="nav-item nav-link active" routerLink="/" (click)="authService.logout()" *ngIf="authService.isLoggedIn()">
        Salir
        <span class="sr-only">(current)</span>
      </a>
    </div>
  </div>
</nav>

我可以看到的class="card-group"和之间的唯一区别class="card-deck-wrapper"是card-deck-wrapper有边距，card-group没有边距。

问：我在这里想念什么？使用card-deck-wrappervs. 的决定因素是什么card-group？