标签: twitter-bootstrap-4

如何在保持样式的同时禁用 Bootstrap 4 中的响应行为？我希望用户在手机上访问网站时能够拥有与桌面版相同的网站，并通过手指手势进行放大和缩小。我该怎么做？

我不知道如何使用 Bootstrap 4，以及如何在一张幻灯片中显示多个小图像 \xe2\x80\x93（如缩略图\xe2\x80\x93），而不是让图像填充轮播的宽度。我已经使用下面的代码尝试了一些操作，但仍然无法堆叠许多图像。

<div class="container">\n    <h2 class="text-center">- Carousel -</h2><br>\n\n    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">\n        <div class="carousel-inner">\n            <div class="carousel-item active">\n                <img src="http://via.placeholder.com/250x250" alt="First slide">\n            </div>\n            <div class="carousel-item">\n                <img src="http://via.placeholder.com/250x250" alt="Second slide">\n            </div>\n            <div class="carousel-item">\n                <img src="http://via.placeholder.com/250x250" alt="Third slide">\n            </div>\n            <div class="carousel-item">\n                <img src="http://via.placeholder.com/250x250" alt="Fourth slide">\n            </div>\n            <div class="carousel-item">\n                <img src="http://via.placeholder.com/250x250" alt="Fifth slide">\n            </div>\n            <div class="carousel-item">\n                <img src="http://via.placeholder.com/250x250" alt="Sixth slide">\n            </div>\n        </div>\n\n        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">\n            <span class="carousel-control-prev-icon" aria-hidden="true"></span>\n            <span class="sr-only">Previous</span>\n        </a>\n        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">\n            <span class="carousel-control-next-icon" …

如何以编程方式选择选择字段中的选项之一（基于某些变量）？

这是模板的代码：

<div class="form-group" >
    <label for="selectAction">Action</label>
    <select ngModel name="option" class="form-control" id="selectAction">
        <option *ngFor="let op of options" [value]="op.id">
            {{ op.description }}
        </option>
    </select>
</div>

我有一个 Bootstrap 4 导航栏菜单：

<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 …

问题在alpha 6中发生，但在alpha 5中不发生

在引导程序中，三个选项卡将包裹在下一行，因此可以在较小的屏幕尺寸上使用。

在Bootstrap 4中，它们不会包裹并从屏幕侧面戳出。这是Bootstrap 4文档中的示例。

如何使它像bootstrap 3一样包裹？

#viewport
{
  width: 200px;
  border: 1px solid #000;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div id="viewport">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>

<!-- …

我打算创建一个表，其中某些列需要具有固定的宽度并且不能自动调整。

我尝试了这种方法，但是没有用。似乎仍然可以根据文本长度自动调整宽度。

我该如何解决？

<div class="container">
    <table class="table table-bordered">
        <thead>
            <tr class="m-0">
                <th class="w-20">a</th>
                <th class="w-10">b</th>
                <th class="w-20">c</th>
                <th class="w-40">d</th>
                <th class="w-10">e</th>
            </tr>
        </thead>
        <tbody>
            <tr class="m-0">
                <th class="w-20">a. Width with 20</th>
                <th class="w-10">b. Smaller width column</th>
                <th class="w-20">c. Should be small but I'm adding the maximum text here just to test if w-20 is working.</th>
                <th class="w-40">d. Biggest width but not working!</th>
                <th class="w-10">e. Another small column</th>
            </tr>
        </tbody>
    </table>
</div>

我得到了Bootstrap 3的工作,但相同的代码在Bootstrap 4中不起作用.

基本上,我正在尝试为DIV创建一个水平滚动,这是一个工作JSFIDDLE for Bootstrap 3(我不想要):DEMO

Bootstrap 4的相同代码不起作用!这是JSFiddle for Bootstrap 4:https://jsfiddle.net/6kvw2q5h/

HTML

<div class="live__scroll">
  <div class="row text-center">
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    </div>
</div>

CSS

.live__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.live__scroll .live__scroll--box {
  display: inline-block;
  float: none;
  padding: 15px;
  border: 1px solid red;
}

我究竟做错了什么？我的智慧结束了.

任何人都可以使用Bootstrap 4帮助我提供响应文本。我到处搜索，但很想看到这方面没有教程。如果您想指导我，这是我的代码。

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div style="font-size: 3rem;">Hello World</div>
    </div>
  </div>
</div>

升级到Bootstrap 4后,我的自动完成(intellisense)无法正常工作.它仍然显示Bootstrap 3.

如何使用Bootstrap 4？

我正在使用ng-bootstrap用Bootstrap编写Angular应用程序。我在这样的组件中封装了一个弹出窗口：

HTML（弹出框组件）

<div>
  <div>Data 1: <i>{{ v.data1 }}</i></div>
  <div>Data 2: <i>{{ v.data2 }}</i></div>
</div>

此弹出窗口在另一个组件中打开：

的HTML

<div *ngFor="let v of vector">
    <span [ngbPopover]="popOver" popoverTitle="Pop title">Open</span>
</div>

<ng-template #popOver>
    <popover></popover>
</ng-template>

我需要将ngFor的v参数传递给弹出框。我该如何实现？