如何仅使div行的一部分可滚动（使用清晰度而不是自举样式）

时间：2019-05-07 07:05:14

标签： html css bootstrap-4

我有一个带点网芯的有角项目，并且在一个组件中尝试某些样式。

我有一行包含2列，第一列为空，第二列包含另一行，其中多列填充有随机数，我只想使包含多行的行的第二列可水平滚动。空的第一列不应滚动。

（我只是在列中添加了随机数以填充一些内容。）

我在white-space: nowrap样式中尝试过overflow-x: auto并设置为可滚动，但是应为可滚动的列不会滚动，而是彼此堆叠。

<div class="clr-row ">
  <div class="clr-col-2" style="background-color:aqua">
    <span >.</span>
  </div>
  <div class="clr-col-10" style="overflow-x:auto; width:100%; white-space:nowrap;">
    <div class="clr-row">
      <div class="clr-col" style="background-color:rebeccapurple">
        <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </span>
      </div>
      <div class="clr-col" style="background-color:brown;">
        <span>2 2 2 2 2</span>
      </div>
      <div class="clr-col" style="background-color:burlywood;">
        <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3</span>
      </div>
      <div class="clr-col" style="background-color:cadetblue;">
        <span>4 4 4 4 4 </span>
      </div>
      <div class="clr-col" style="background-color:deeppink;">
        <span> 5 5 5 5 5 5 5 5 5 5 5 5 5 5</span>
      </div>
      <div class="clr-col" style="background-color:greenyellow;">
        <span>6 6 6 6 6 </span>
      </div>
      <div class="clr-col" style="background-color:orange;">
        <span>7 7 7 7 7 7 7 7 7 7 7 7 7 7</span>
      </div>
      <div class="clr-col" style="background-color:black;">
        <span>8 8 8 8 8 8 </span>
      </div>
      <div class="clr-col" style="background-color:dimgrey;">
        <span>9 9 9 9 9 9 9 9 9 9 9 9 9 9</span>
      </div>
      <div class="clr-col" style="background-color:palegoldenrod;">
        <span>0 0 0 0 0 0 </span>
      </div>
      <div class="clr-col" style="background-color:lightcoral;">
        <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1</span>
      </div>
      <div class="clr-col" style="background-color:wheat;">
        <span>2 2 2 2 2 2 </span>
      </div>
      <div class="clr-col" style="background-color:teal;">
        <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3 </span>
      </div>
      <div class="clr-col" style="background-color:Highlight;">
        <span>4 4 4 4 4 4 </span>
      </div>
    </div>
  </div>
</div>

我只希望包含一行且内部带有随机数的行的第二列是可滚动的，而第一列应该是静态的。

输出的屏幕快照，我目前正在获取包含具有许多列的行的第二列彼此堆叠的位置，而不是提供滚动选项。 Output

2 个答案:

答案 0 :(得分：0)

不确定我是否理解您的问题，但是您可以使用position: fixed来修复第一行。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="clr-row ">
  <div class="clr-col-2" style="background-color:aqua; position:fixed; width:100%; top:0;">
    <span>.</span>
  </div>
  <div class="clr-col-10" style="overflow-x:auto; width:100%; white-space:nowrap;">
    <div class="clr-row">
      <div class="clr-col" style="background-color:rebeccapurple">
        <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </span>
      </div>
      <div class="clr-col" style="background-color:brown;">
        <span>2 2 2 2 2</span>
      </div>
      <div class="clr-col" style="background-color:burlywood;">
        <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3</span>
      </div>
      <div class="clr-col" style="background-color:cadetblue;">
        <span>4 4 4 4 4 </span>
      </div>
      <div class="clr-col" style="background-color:deeppink;">
        <span> 5 5 5 5 5 5 5 5 5 5 5 5 5 5</span>
      </div>
      <div class="clr-col" style="background-color:greenyellow;">
        <span>6 6 6 6 6 </span>
      </div>
      <div class="clr-col" style="background-color:orange;">
        <span>7 7 7 7 7 7 7 7 7 7 7 7 7 7</span>
      </div>
      <div class="clr-col" style="background-color:black;">
        <span>8 8 8 8 8 8 </span>
      </div>
      <div class="clr-col" style="background-color:dimgrey;">
        <span>9 9 9 9 9 9 9 9 9 9 9 9 9 9</span>
      </div>
      <div class="clr-col" style="background-color:palegoldenrod;">
        <span>0 0 0 0 0 0 </span>
      </div>
      <div class="clr-col" style="background-color:lightcoral;">
        <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1</span>
      </div>
      <div class="clr-col" style="background-color:wheat;">
        <span>2 2 2 2 2 2 </span>
      </div>
      <div class="clr-col" style="background-color:teal;">
        <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3 </span>
      </div>
      <div class="clr-col" style="background-color:Highlight;">
        <span>4 4 4 4 4 4 </span>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

我找到了解决问题的方法。

我扭曲了第二列，其中包含具有div标签的许多列的行，并添加了样式使该div标签可滚动，然后在用于包装该列的新div标签内添加了另一个div标签以扩展其宽度列大于其设定值，这解决了我的列彼此堆叠的问题

<div class="clr-row ">
  <div class="clr-col-2" style="background-color:aqua">
    <span>.</span>
  </div>
  <div class="clr-col-10">
    <div style="overflow-x:auto;white-space:nowrap">
      <div style="width:1920px">
        <div class="clr-row">
          <div class="clr-col" style="background-color:lavender;float:left">
            <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </span>
          </div>
          <div class="clr-col" style="background-color:brown;float:left">
            <span>2 2 2 2 2</span>
          </div>
          <div class="clr-col" style="background-color:burlywood;float:left">
            <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3</span>
          </div>
          <div class="clr-col" style="background-color:cadetblue;float:left">
            <span>4 4 4 4 4 </span>
          </div>
          <div class="clr-col" style="background-color:deeppink;float:left">
            <span> 5 5 5 5 5 5 5 5 5 5 5 5 5 5</span>
          </div>
          <div class="clr-col" style="background-color:greenyellow;float:left">
            <span>6 6 6 6 6 </span>
          </div>
          <div class="clr-col" style="background-color:orange;float:left">
            <span>7 7 7 7 7 7 7 7 7 7 7 7 7 7</span>
          </div>
          <div class="clr-col" style="background-color:black;float:left">
            <span>8 8 8 8 8 8 </span>
          </div>
          <div class="clr-col" style="background-color:dimgrey;float:left">
            <span>9 9 9 9 9 9 9 9 9 9 9 9 9 9</span>
          </div>
          <div class="clr-col" style="background-color:palegoldenrod;float:left">
            <span>0 0 0 0 0 0 </span>
          </div>
          <div class="clr-col" style="background-color:lightcoral;float:left">
            <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1</span>
          </div>
          <div class="clr-col" style="background-color:wheat;float:left">
            <span>2 2 2 2 2 2 </span>
          </div>
          <div class="clr-col" style="background-color:teal;float:left">
            <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3 </span>
          </div>
          <div class="clr-col" style="background-color:Highlight;float:left">
            <span>4 4 4 4 4 4 </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

请记住，我使用的是清晰度而非引导程序，这就是为什么当您运行代码段时，它看起来与屏幕截图有所不同。

我的输出的屏幕截图。 Final_Output

相关问题
最新问题