时间戳

首页 > 解决方案 > 粘性div卡在行中

html - 粘性div卡在行中

问题描述

我正在使用引导程序 3。我在 .cshtml 中尝试做的事情是创建一个“粘性 div”，直到这次我尝试过https://jsfiddle.net/r41vunwb/ 我不明白为什么粘性部分不会传递到下一行。

这是我最小化的代码部分

div.sticky {
  position: sticky !important;
  top: 0;
  align-self: flex-start;
  height: auto;
}
<div class="panel-body">
    <div class="row" style="text-align-last:center">
        <div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-bottom-style:none;">
            <div class="sticky" style="font-weight:bold; font-size:20px; background-color:#c9e8ff"> AAAAAA </div>
            <div style="border-top:groove">
                <p style="margin-bottom:-5px; font-weight:bold;">Ratio1</p>
            </div>
            <div id="chartdivE_i" style="min-height:400px"></div>
        </div>
    </div>
    <div class="row" style="text-align-last:center">
        <div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none; border-bottom-style:none;">
            <div style="border-top:groove">
                <p style="margin-bottom:-5px; font-weight:bold;">Ratio2</p>
            </div>
            <div id="chartdivK_i" style="min-height:400px"></div>
        </div>
    </div>
    <div class="row" style="text-align-last:center">
        <div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none; border-bottom-style:none;">
            <div style="border-top:groove">
                <p style="margin-bottom:-5px; font-weight:bold;">Ratio3</p>
            </div>
            <div id="chartdivT_i" style="min-height:400px"></div>
        </div>
    </div>
    <div class="row" style="text-align-last:center">
      <div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none;">
          <div style="border-top:groove">
              <p style="margin-bottom:-5px; font-weight:bold;">Ratio4</p>
          </div>
          <div id="chartdivP_i" style="min-height:400px"></div>
      </div>
    </div>
</div>

感谢你所做的一切

标签： htmlcss

解决方案

因为您的粘性 div 在第一行内。panel-body在jsfiddle下移动它

div.sticky {
  position: sticky !important;
  top: 0;
  align-self: flex-start;
  height: auto;
}
<div class="panel-body">
  <div class="sticky" style="font-weight:bold; font-size:20px; background-color:#c9e8ff"> AAAAAA </div>
      <div class="row" style="text-align-last:center">
          <div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-bottom-style:none;">
              <div style="border-top:groove">
                  <p style="margin-bottom:-5px; font-weight:bold;">Ratio1</p>
              </div>
              <div id="chartdivE_i" style="min-height:400px"></div>
          </div>
      </div>
      <div class="row" style="text-align-last:center">
          <div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none; border-bottom-style:none;">
              <div style="border-top:groove">
                  <p style="margin-bottom:-5px; font-weight:bold;">Ratio2</p>
              </div>
              <div id="chartdivK_i" style="min-height:400px"></div>
          </div>
      </div>
      <div class="row" style="text-align-last:center">
          <div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none; border-bottom-style:none;">
              <div style="border-top:groove">
                  <p style="margin-bottom:-5px; font-weight:bold;">Ratio3</p>
              </div>
              <div id="chartdivT_i" style="min-height:400px"></div>
          </div>
      </div>
      <div class="row" style="text-align-last:center">
        <div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none;">
            <div style="border-top:groove">
                <p style="margin-bottom:-5px; font-weight:bold;">Ratio4</p>
            </div>
            <div id="chartdivP_i" style="min-height:400px"></div>
        </div>
      </div>
  </div>

推荐阅读