带水平滚动的DIV - Bootstrap 4

时间:2018-06-13 15:49:47

标签: html5 css3 bootstrap-4

我正在尝试为DIV获取水平滚动但由于某种原因我无法实现它。我已经看到其他类似的帖子已经使用overflow-xwhite-space:nowwrap解决了,但这些都不适用于我。

This is the part of my site where I want to have a horizontal scroll

这是我的代码(我在这里添加了比所需更多的CSS,以便您可以更好地查看我的问题)。或者,您可以访问网站 here

.sidebar {
  background-color: #ececec;
  width: 3000px;
  /*overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;*/
}

.wallet {
  background-color: #7b67db;
  background-image: linear-gradient(120deg, #7b67db 0%, #ab8afb 50%, #FFFFFF 100%);
  width: 90%;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
  height: 167px;
  widows: 90%;
  margin: 0 auto;
}

.wallet-body {
  background-color: #fff;
  border-radius: 0 10px 10px 0;
}

.raise {
  font-size: 0.8em;
  color: #b8b8b8;
  padding-top: 8px;
  margin-bottom: 8px;
}

.fa-arrow-up {
  font-size: 0.8em;
  color: #b8b8b8;
  margin-top: -24px;
  margin-right: 56px;
}

hr {
  margin-top: 0;
  margin-bottom: 14px;
}

.balance {
  color: #697377;
  font-size: 0.8em;
  margin-bottom: -3px;
}

.amount {
  color: #697377;
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 20px;
}

.btn-depositar {
  background-color: #7b67db;
  padding: 10px 70px 10px 70px;
  border-radius: 50px;
  color: #fff;
}

.btn-depositar:hover {
  text-decoration: none;
  color: #fff;
  background-color: #5a50a5;
}

.currency-symbol {
  vertical-align: middle;
  margin-top: 40px;
  margin-left: 5px;
}
<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>

  <div class="row scroller">
    <div class="col-12 sidebar">
      <!-- Pesos -->
      <div class="col-4 full-wallet float-left d-inline-block">
        <div class="col-12 wallet pl-0 pr-0 mt-4">
          <div class="col-lg-2 d-inline-block wallet-side">
            <img src="images/dollar.png" alt="símbolo pesos" class="currency-symbol">
          </div>
          <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
            <p class="raise">CLP$999.999.999</p>
            <!--<i class="fas fa-arrow-up float-right"></i>-->
            <hr>
            <p class="balance">Balance</p>
            <p class="amount">$999.999</p>
            <a href="#" class="btn-depositar">Depositar</a>
          </div>
        </div>
      </div>
      <!-- /Pesos-->

      <!-- Bitcoin -->
      <div class="col-4 full-wallet float-left d-inline-block">
        <div class="col-12 wallet pl-0 pr-0 mt-4">
          <div class="col-lg-2 d-inline-block wallet-side">
            <img src="images/bitcoin.png" alt="símbolo pesos" class="currency-symbol">
          </div>
          <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
            <p class="raise">CLP$999.999.999</p>
            <!--<i class="fas fa-arrow-up float-right"></i>-->
            <hr>
            <p class="balance">Balance</p>
            <p class="amount">$999.999</p>
            <a href="#" class="btn-depositar">Depositar</a>
          </div>
        </div>
      </div>
      <!-- /Bitcoin-->

      <!-- Ethereum-->
      <div class="col-4 full-wallet float-left d-inline-block">
        <div class="col-12 wallet pl-0 pr-0 mt-4">
          <div class="col-lg-2 d-inline-block wallet-side">
            <img src="images/ethereum.png" alt="símbolo pesos" class="currency-symbol">
          </div>
          <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
            <p class="raise">CLP$999.999.999</p>
            <!--<i class="fas fa-arrow-up float-right"></i>-->
            <hr>
            <p class="balance">Balance</p>
            <p class="amount">$999.999</p>
            <a href="#" class="btn-depositar">Depositar</a>
          </div>
        </div>
      </div>
      <!-- /Ethereum-->

      <!-- Ethereum-->
      <div class="col-4 full-wallet float-left d-inline-block">
        <div class="col-12 wallet pl-0 pr-0 mt-4">
          <div class="col-lg-2 d-inline-block wallet-side">
            <img src="images/ethereum.png" alt="símbolo pesos" class="currency-symbol">
          </div>
          <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
            <p class="raise">CLP$999.999.999</p>
            <!--<i class="fas fa-arrow-up float-right"></i>-->
            <hr>
            <p class="balance">Balance</p>
            <p class="amount">$999.999</p>
            <a href="#" class="btn-depositar">Depositar</a>
          </div>
        </div>
      </div>
      <!-- /Ethereum-->
    </div>
  </div>

</body>


</html>

2 个答案:

答案 0 :(得分:0)

我会从此.float-left

中删除<div class="col-4 full-wallet float-left d-inline-block">

答案 1 :(得分:0)

.sidebar {
  background-color: #ececec;
  width: 3000px;
  /*overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;*/
}

.wallet {
  background-color: #7b67db;
  background-image: linear-gradient(120deg, #7b67db 0%, #ab8afb 50%, #FFFFFF 100%);
  width: 90%;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
  height: 167px;
  widows: 90%;
  margin: 0 auto;
}

.wallet-body {
  background-color: #fff;
  border-radius: 0 10px 10px 0;
}

.raise {
  font-size: 0.8em;
  color: #b8b8b8;
  padding-top: 8px;
  margin-bottom: 8px;
}

.fa-arrow-up {
  font-size: 0.8em;
  color: #b8b8b8;
  margin-top: -24px;
  margin-right: 56px;
}

hr {
  margin-top: 0;
  margin-bottom: 14px;
}

.balance {
  color: #697377;
  font-size: 0.8em;
  margin-bottom: -3px;
}

.amount {
  color: #697377;
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 20px;
}

.btn-depositar {
  background-color: #7b67db;
  padding: 10px 70px 10px 70px;
  border-radius: 50px;
  color: #fff;
}

.btn-depositar:hover {
  text-decoration: none;
  color: #fff;
  background-color: #5a50a5;
}

.currency-symbol {
  vertical-align: middle;
  margin-top: 40px;
  margin-left: 5px;
}

.addscrollbar{
    overflow-x: scroll;
    display: flex;
}
<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>

  <div class="row scroller">
    <div class="col-12 sidebar addscrollbar">
      <!-- Pesos -->
      <div class="col-4 full-wallet float-left d-inline-block">
        <div class="col-12 wallet pl-0 pr-0 mt-4">
          <div class="col-lg-2 d-inline-block wallet-side">
            <img src="images/dollar.png" alt="símbolo pesos" class="currency-symbol">
          </div>
          <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
            <p class="raise">CLP$999.999.999</p>
            <!--<i class="fas fa-arrow-up float-right"></i>-->
            <hr>
            <p class="balance">Balance</p>
            <p class="amount">$999.999</p>
            <a href="#" class="btn-depositar">Depositar</a>
          </div>
        </div>
      </div>
      <!-- /Pesos-->

      <!-- Bitcoin -->
      <div class="col-4 full-wallet float-left d-inline-block">
        <div class="col-12 wallet pl-0 pr-0 mt-4">
          <div class="col-lg-2 d-inline-block wallet-side">
            <img src="images/bitcoin.png" alt="símbolo pesos" class="currency-symbol">
          </div>
          <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
            <p class="raise">CLP$999.999.999</p>
            <!--<i class="fas fa-arrow-up float-right"></i>-->
            <hr>
            <p class="balance">Balance</p>
            <p class="amount">$999.999</p>
            <a href="#" class="btn-depositar">Depositar</a>
          </div>
        </div>
      </div>
      <!-- /Bitcoin-->

      <!-- Ethereum-->
      <div class="col-4 full-wallet float-left d-inline-block">
        <div class="col-12 wallet pl-0 pr-0 mt-4">
          <div class="col-lg-2 d-inline-block wallet-side">
            <img src="images/ethereum.png" alt="símbolo pesos" class="currency-symbol">
          </div>
          <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
            <p class="raise">CLP$999.999.999</p>
            <!--<i class="fas fa-arrow-up float-right"></i>-->
            <hr>
            <p class="balance">Balance</p>
            <p class="amount">$999.999</p>
            <a href="#" class="btn-depositar">Depositar</a>
          </div>
        </div>
      </div>
      <!-- /Ethereum-->

      <!-- Ethereum-->
      <div class="col-4 full-wallet float-left d-inline-block">
        <div class="col-12 wallet pl-0 pr-0 mt-4">
          <div class="col-lg-2 d-inline-block wallet-side">
            <img src="images/ethereum.png" alt="símbolo pesos" class="currency-symbol">
          </div>
          <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
            <p class="raise">CLP$999.999.999</p>
            <!--<i class="fas fa-arrow-up float-right"></i>-->
            <hr>
            <p class="balance">Balance</p>
            <p class="amount">$999.999</p>
            <a href="#" class="btn-depositar">Depositar</a>
          </div>
        </div>
      </div>
      <!-- /Ethereum-->
    </div>
  </div>

</body>


</html>

您可以将属性overflow-x: scroll设置为在内容溢出容器时启用滚动条,并使用display: flex属性使其仅在一行中溢出。查看我已添加到您代码中的.addscrollbar课程。