自举4卧式滚子div

Question

我在引导程序3中使用了这个程序，但是相同的代码在引导程序4中不起作用。

基本上，我试图为DIV创建一个水平滚动，下面是一个用于引导3(我不想要的)的实用JSFIDDLE：演示

但是，引导程序4的相同代码不起作用！下面是引导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;
}

我做错了什么？我快疯了。

Answer 1

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

注：码页

Answer 2

我认为您需要删除.row的柔性盒功能，因此添加：

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

​

Answer 3

使用引导式4的水平侧弯杆

表中

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