Bootstrap 4：设置列宽固定位置内容的宽度答案

【问题标题】：Bootstrap 4 : Set Width of Column Width Fixed Position ContentBootstrap 4：设置列宽固定位置内容的宽度
【发布时间】：2019-10-31 21:54:45
【问题描述】：

我有一个基于 Bootstrap 4 的网页，其中 1 行有 3 列。我希望第 1 列和第 3 列具有固定位置，而第 2 列是可滚动的。

<div class="container" style="align-content:center;background-color:red;">
    <div class="form-row" style=" margin: 0px;" >
                <div class="col-lg-4" style="background-color:white;" >
                    <div style="position:fixed;">                    
                        Alapus berihal aralori nog abosiman to lere sot. Tec rihew elicip eho ma gub? Atiyi fe emanoto urigifie cep corike? Ino oraled efoponay to cinit opotare. Tadedo pet rico ocodum yetej tupe ime havi bod huwese, esofahe esereho hihuriet ner ge. Laha rig hikede ri totonic porac. Ebacep yiribos toriel delu riti iter. Cepit atobiteg tavet icut ariyase cilayon.

                    </div>

                </div>
                <div class="col-lg-6" style="background-color:red;" >
                    Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir.
                    Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir.
                    Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir.
                    Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir.
                    Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir.

                </div>
                <div class="col-lg-2" style="background-color:yellow;"  >            
                    <div style="position:fixed;">
                       Cegeh na rasi nitora sep lim ded so rar? Po tosula iwe ciyirif; iro seri la nenegac ralala meralak, nomir na lerorer! Lita resonop eropem enulose mi rer ne tacacal yumo calos. Dic teril satec yel wupip rar: Keye hipoce egol ecimi ra cienet. Yohicem niran sor naqetar odecafel eso ronu tunerig sos: Musedu roy tegovi hu reru inaca. Lo onobeda ategat de. Ikikosen polie re uweme ronepo. Mitif reqepu sel. Fubiel pac madotil pip, nedupa rotolin re deciso riciho; tenabir rakira nay asaluti yer reci penede iepaso.
                    </div>


                </div>
        </div>

</div>

第 3 列的内容超出列。如果我删除 position:fixed，内容将保留在列中，但该列变为可滚动的。如果我使用 position:sticky，我不知道在不使用 javascript 的情况下将 top 属性设置为什么。有谁知道如何在将列内容保持在列内的同时保持列的内容固定？

【问题讨论】：

你的3列内容很长，如果你只让第二列可滚动，你认为用户如何查看其他列的内容？

标签： html css twitter-bootstrap

【解决方案1】：

你只需要这样做：

<div class="col-md-3 h-100">...</div>
<div class="col-md-3 h-100 scrolling-content">...</div>
<div class="col-md-3 h-100">...</div>

在你的 CSS 中：

.scrolling-content {
  overflow: scroll;
}

【讨论】：

【解决方案2】：

您可以使用此代码

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Demo</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    
    .box {
      overflow: scroll;
    }
  </style>
</head>

<body>
  <div class="container" style="align-content: center; background-color: red;">
    <div class="form-row row" style=" margin: 0px;">
      <div class="col-md-4" style="background-color: white;">
        Alapus berihal aralori nog abosiman to lere sot. Tec rihew elicip eho ma gub? Atiyi fe emanoto urigifie cep corike? Ino oraled efoponay to cinit opotare. Tadedo pet rico ocodum yetej tupe ime havi bod huwese, esofahe esereho hihuriet ner ge. Laha rig
        hikede ri totonic porac. Ebacep yiribos toriel delu riti iter. Cepit atobiteg tavet icut ariyase cilayon.
      </div>
      <div class="col-md-6 box" style="background-color: red;">
        Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat
        yisegi. Ale ren geneva; lac pogeba adi nome layedir. Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la
        semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir. Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic
        etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir. Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas?
        Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir. Vani
        vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler
        cat yisegi. Ale ren geneva; lac pogeba adi nome layedir.
      </div>
      <div class="col-md-2" style="background-color: yellow;">
        Cegeh na rasi nitora sep lim ded so rar? Po tosula iwe ciyirif; iro seri la nenegac ralala meralak, nomir na lerorer! Lita resonop eropem enulose mi rer ne tacacal yumo calos. Dic teril satec yel wupip rar: Keye hipoce egol ecimi ra cienet. Yohicem niran
        sor naqetar odecafel eso ronu tunerig sos: Musedu roy tegovi hu reru inaca. Lo onobeda ategat de. Ikikosen polie re uweme ronepo. Mitif reqepu sel. Fubiel pac madotil pip, nedupa rotolin re deciso riciho; tenabir rakira nay asaluti yer reci penede
        iepaso.
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>

</html>

【讨论】：