标签: twitter-bootstrap-4

这里提出的问题涉及 < alpha-3 中的合理按钮组。它在 alpha-5 中不起作用（我认为在 alpha-4 中也是如此）。

从我从问题列表中收集到的信息来看，它已被删除并且不会再回来。

我正在使用 SCSS 和可能的 Flexbox（如果这提供了更好的解决方案）。

我想使用切换状态单选按钮

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
    </label>
</div>

有人能够提供解决方案吗？

我有一个简单的导航栏:

<nav class="navbar navbar-inverse navbar-toggleable-md fixed-top custom-navbar" style="background-color: #321048;">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav d-flex justify-content-end" style="width:100%">
              <li class="nav-item">
                <a class="nav-link" href="#home">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#rolfing">Rolfing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#packages">Packages</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#about">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#footer">Contact</a>
              </li>
            </ul>
        </div>
</nav>

对于所有屏幕尺寸,一切都按预期工作. 我想对切换器进行正确的证明,因为菜单是正确的.因此,根据Bootstrap 4 alpha 6,我补充道

navbar-toggler-right

按钮,它确实正确地对齐按钮,但导航栏本身不再扩展以填充按钮.所以切换按钮看起来只是浮动.我满足于让navbar-toggler-right让它工作,但我只是好奇它为什么会这样做.与navbar-toggler-right有关,也许有绝对的位置.navbar-toggler-left也做同样的事情.

编辑 为了提供更多细节,切换按钮位于左侧或右侧并不重要.添加类navbar-toggler-left会导致同样的问题.我的问题不是如何将切换按钮向右移动(我可以通过添加浮动:向右按钮来实现),但为什么导航栏切换器左右类具有这种奇怪的行为.

有谁知道如何在Bootstrap 4 Alpha 6更新中对齐'list-group-item'？我可以在卡片本身添加文本中心,这会集中对齐卡片头和链接,但列表组不会移动.

我已经尝试了mx-auto类,这会集中移动文本,但边框缩小到只适合文本,所以看起来不合适

卡文本中心问题的示例.

这是我一直在测试的代码:

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-block">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

我已经搜索了整堆,但似乎无法找到一个有效的解决方案.基本上我的NavBar完全是我想要的.我现在想要缩小NavBar,当我的页面向下滚动时,使用漂亮的平滑过渡(动画)使其变得更加纤细.

这是我当前NavBar的HTML标记:

<header>


      <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
          <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="#"><img class="animated bounceIn" src="img/logo-light.png" alt="I Web You &#8211; Perth Website Branding"></a>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-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="#">About</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Portfolio</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Contact</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Blog</a>
                  </li>
              </ul>
          </div>
      </nav>


    </header>

我有什么想法可以达到这个目的吗？我做了很多搜索,但大多数解决方案都是针对Bootstrap …

我试图让这个布局工作:当我调整浏览器大小并且它们不会换行时,列保持恒定宽度 - 而是一旦达到最小宽度就会出现水平滚动条.我的代码:

<div class="card card-outline-primary" style="min-width:500px">
<div class="card-block container-fixed">
    <form class="row">
        <div class="col-4" style="border:solid;border-color:red;border-width:5px;min-width:250px">
            <label for="visualTheme" class="control-label">1234</label>
            <div>
                <input class="form-control" style="height:30px;width:200px" id="visualTheme" />
            </div>
        </div>
        <div class="col-4" style="border:solid;border-color:blue;border-width:5px;min-width:250px">
            <label class="control-label">5678</label>
            <div>
                <input class="form-control" style="height:30px;width:200px" id="startingScreen" />
            </div>
        </div>
        <div class="col-4" style="border:solid;border-color:green;border-width:5px;min-width:250px">

        </div>
     </form>
</div>

小提琴: 小提琴

如果我使用最小宽度作为列包装.

谢谢您的帮助.

这是代码.我需要将导航栏(没有徽标)移动到右侧.

所以我添加了float-right来赞<div class="collapse navbar-collapse float-right" id="navbarSupportedContent">.

但它没有奏效.

完整代码

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Popular Quotes Collection</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 float-right" 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="#">Submit a Quote</a>
          </li>
        </ul>
      </div>
    </nav>

以下代码使用Bootstrap版本3完全正常.但是,由于升级到Bootstrap 4 Beta2,淡入淡出过渡不起作用.它只是跳转到下一个图像而不是平滑过渡:

HTML

<div id="carousel1" class="carousel fade" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel1" data-slide-to="0" class="active"></li>
      <li data-target="#carousel1" data-slide-to="1"></li>
      <li data-target="#carousel1" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
      <div class="item active"><img src="images/a.jpg" alt="First slide image" class="center-block">
        <div class="carousel-caption">
          <h3>First slide Heading</h3>
          <p>First slide Caption</p>
        </div>
      </div>
      <div class="item"><img src="images/b.jpg" alt="Second slide image" class="center-block">
        <div class="carousel-caption">
          <h3>Second slide Heading</h3>
          <p>Second slide Caption</p>
        </div>
      </div>
      <div class="item"><img src="images/c.jpg" alt="Third slide image" class="center-block">
        <div class="carousel-caption">
          <h3>Third slide Heading</h3>
          <p>Third slide Caption</p>
        </div>
      </div>
    </div>

    <a class="left …

我有一个里面dropdown有 3 个主要“类别”，每个“类别”都有几个复选框（这用于过滤搜索）。下面是一个例子：

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Button</button>
    <div class="dropdown-menu">
        <h6 class="dropdown-header">Category 1:</h6>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option1</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option2</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option3</a>

        <h6 class="dropdown-header">Category 2:</h6>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option1</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option2</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option3</a>

        <h6 class="dropdown-header">Category 3:</h6>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option1</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option2</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option3</a>
    </div>
</div>

我希望这 3 个“类别”并排dropdown排列，但是，默认情况下，在 Bootstrap 的类中，它们显示为垂直堆栈。我试图通过将row类添加到dropdown …

我正在尝试使用Thymeleaf为我的Spring Boot项目添加bootstrap.

的index.html

<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header"> </head>
<body>

<div th:replace="@{'views/' + ${content}} :: ${content}"></div>

<div lang="en" th:replace="fragments/footer :: footer"> </div>
</body>
</html>

footer.html

<div xmlns:th="http://www.thymeleaf.org" th:fragment="footer" >
    <script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
    <script  th:src="@{/webjars/popper.js/1.12.9-1/umd/popper.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.0.0-1/js/bootstrap.min.js}"  ></script>
</div>

了header.html

<head xmlns:th="http://www.thymeleaf.org" th:fragment="header" >
    <meta charset="UTF-8">
    <title>?????? ???????????? ??</title>
    <link th:rel="stylesheet"  th:href="@{webjars/bootstrap/4.0.0-1/css/bootstrap.min.css} "/>
</head>

MvcConfig.java

    @Configuration
public class MvcConfig implements WebMvcConfigurer {

   @Override
   public void addResourceHandlers(ResourceHandlerRegistry registry) {
      registry
              .addResourceHandler("/webjars/**")
              .addResourceLocations("/webjars/")
              .resourceChain(false);
   }
}

样式不适用于页面和抛出错误: 在jquery,bootstrap,popper中.

我怎么能解决这个问题？ …

我想使用 Bootstrap 4 在 Angular 应用程序中实现自动完成输入字段。这是所需的结果：

基于某些国家/地区的数组，我需要将输入字段中的文本与可能的有效国家/地区进行匹配。