4

我得到这个适用于 Bootstrap 3，但相同的代码在 Bootstrap 4 中不起作用。

基本上，我正在尝试为 DIV 创建一个水平滚动，这是一个适用于 Bootstrap 3 的工作 JSFIDDLE（我不想要）：DEMO

Bootstrap 4 的相同代码不起作用！这是 Bootstrap 4 的 JSFiddle：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;
}

我究竟做错了什么？我无计可施。

4

3 回答 3

13

HTML

<div class="container testimonial-group">
    <div class="row text-center flex-nowrap">
        <div class="col-sm-4">1</div>
        <div class="col-sm-4">2</div>
        <div class="col-sm-4">3</div>
        <div class="col-sm-4">4</div>
        <div class="col-sm-4">5</div>
        <div class="col-sm-4">6</div>
        <div class="col-sm-4">7</div>
        <div class="col-sm-4">8</div>
        <div class="col-sm-4">9</div>
    </div>
</div>

CSS

/* The heart of the matter */
.testimonial-group > .row {
  overflow-x: auto;
  white-space: nowrap;
}
.testimonial-group > .row > .col-sm-4 {
  display: inline-block;
  float: none;
}

/* Decorations */
.col-sm-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }
.col-sm-4:nth-child(3n+1) { background: #c69; }
.col-sm-4:nth-child(3n+2) { background: #9c6; }
.col-sm-4:nth-child(3n+3) { background: #69c; }

注意：codepen

于 2017-12-13T12:28:50.763 回答
1

我认为您需要删除.rowso 添加的 flexbox 功能：

.live__scroll .row{
  display:block;
}

所以它应该如下所示：

.live__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.live__scroll .row{
  display:block;
}
.live__scroll .live__scroll--box {
  display: inline-block;
  float: none;
  padding: 15px;
  border: 1px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

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

于 2017-12-09T22:00:56.940 回答
1

使用引导程序 4 的水平 scoll 条

在表中

 <div class="table-responsive">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
          <th>City</th>
          <th>Country</th>
          <th>Sex</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>bharti</td>
          <td>parmar</td>
          <td>422</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
      </tbody>
    </table>

在导航栏中

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>

</div>

CSS代码

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}
于 2020-03-24T12:13:06.837 回答