Bootstrap 4: установка ширины столбца содержимого фиксированной позиции - PullRequest
Новая
       5

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

0 голосов
/ 26 октября 2019

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

Ответы [ 2 ]

0 голосов
/ 31 октября 2019

Вы можете использовать этот код 

<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>
0 голосов
/ 27 октября 2019

Вы просто должны сделать что-то вроде этого: 

<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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...