Два левых плавающая COLS плюс правый плавающий врезку Bootstrap

Question

Моя цель состоит в том, чтобы достичь следующего изображения на моей странице:

мне удалось добиться этого с помощью HTML и CSS вы можете найти ниже, но это Безразлично Кажется очень жизнеспособным, потому что боковая панель теряет физический рост из-за position: absolute.

Мне интересно, можно ли сделать одну строку с двумя столбцами слева и боковую панель справа, без необходимости использовать позиционирование. Я пробовал position: relative с отрицательным результатом top, но так как топ col-md-9 имеет изменяемую высоту (в зависимости от того, что вводится), я не могу отрицательно ответить top. Это будет просто слишком статично и невозможно поддерживать.

Изменение порядка в HTML ничего не меняет, так как физическая высота боковой панели перемещает второй контент вниз.

.sidebar { 
 
    position: absolute; 
 
    width: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row"> 
 
    <div class="col-md-9"> 
 
    Changing content 
 
    </div> 
 
    <div class="col-md-3 sidebar"> 
 
    Sidebar 
 
    </div> 
 
    <div class="col-md-9"> 
 
    More content 
 
    </div> 
 
</div>

Answer 1

Я использую колонки xs для этого примера, но вы можете изменить на md на своей странице.

Сначала создайте колонку с 9 колонками и 3 колонками. Затем положите два div внутри 9-столбца.

.content, .sidebar { 
 
    margin: 10px; 
 
    padding: 20px; 
 
} 
 

 
.content { 
 
    background-color: navy; 
 
    color: white; 
 
} 
 

 
.sidebar { 
 
    background-color: yellow; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row wrapper"> 
 
    <div class="col-xs-9"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <div class="content">Content</div> 
 
     </div> 
 
     <div class="col-xs-12"> 
 
     <div class="content">Content</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
    <div class="sidebar">Sidebar</div> 
 
    </div> 
 
</div>

Answer 2

Вы можете гнездо Col-ое внутри другого Col-хе Вы просто должны создать 2 родителей: содержание и боковая панель, а затем добавить несколько содержания в родительское содержимом:

<div class="row"> 
    <div class="col-md-9"> 
     <div class="col-md-12"> 
      Content 
     </div> 
     <div class="col-md-12"> 
      More content 
     </div> 

    </div> 
    <div class="col-md-3 sidebar"> 
     Sidebar 
    </div> 

</div> 

Answer 3

Вы не можете иметь более что 12 столбцов в строке, если она не определена не в пользовательской сетки.

Что вы можете попробовать это:

<div class="row"> 
    <div class="col-md-9"> 
     <div class="row"> 
       <div class="col-sm-12"> 
        Changing content 
       </div> 
       <div class="col-sm-12"> 
        More content 
       </div> 
      </div> 
    </div> 
    <div class="col-md-3" style="position: relative;"> 
     <div class="row"> 
      <div class="col-sm-12 sidebar"> 
       Sidebar 
      </div> 
     </div> 
    </div> 
</div 

Answer 4

В качестве решения, вы можете сделать врезку, чтобы остаться на правой стороне экрана, если вы сделаете левый раздел overflow: auto.

.sidebar { 
 
    height: 100vh; 
 
    background: lightgreen; 
 
} 
 
.left-section { 
 
    height: 100vh; 
 
    background: lightblue; 
 
    overflow: auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-sm-9 left-section"> 
 
     <div class="row"> 
 
     <div class="col-sm-12"> 
 
      Changing content 
 
     </div> 
 
     <div class="col-sm-12"> 
 
      More content 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-3 sidebar"> 
 
     Sidebar 
 
    </div> 
 
</div> 
 
</div>