Bootstrap 4: Установить ширину и ширину столбца для содержимого с фиксированным положением

Question

У меня есть веб-страница на основе 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, я не знаю, что установить для атрибута top без использования javascript. Кто-нибудь знает, как я могу сохранить содержимое столбца фиксированным, сохраняя его внутри столбца?

html css twitter-bootstrap

0

user2797166 26 Окт 2019 в 05:43

Ваши 3 столбца имеют длинный контент, если вы сделаете прокручиваемым только второй столбец, как вы думаете, пользователь может просматривать контент для других столбцов?

–

Nidhin Joseph

26 Окт 2019 в 05:54

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

0

Raphaël Etang-Salé 27 Окт 2019 в 06:54

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

-1

Piyush Teraiya 31 Окт 2019 в 16:54

Bootstrap 4: Установить ширину и ширину столбца для содержимого с фиксированным положением

2 ответа

Похожие вопросы

Новые вопросы

html