То, что вы просите, встроено в BS.Но вы замутили фреймворк, добавив html там, где его не должно быть.в частности, оборачивая столбцы BS тегом привязки, который нарушает сеточную систему BS, в частности правило, гласящее, что только столбцы могут быть потомками строк.
Я сделал ваш HTML значительно короче для простоты и немного изменил ваш JS, чтобыпродемонстрировать скрывающуюся часть.Я надеюсь, что это хороший пример, который вы можете расширить.
ИСПРАВЛЕНИЯ:
- Я переместил вкладку привязки внутри столбца.Это нарушало выравнивание сетки BS. И это также неверная разметка для системы сетки BS.
- Я изменил ваш JS, чтобы скрыть col, а не якорь.Это позволяет гибкой сетке BS правильно выполнять выравнивание
- В javascript рассмотрите возможность добавления атрибута в свою разметку, чтобы вам не приходилось перемещаться по нужному количеству родительских уровней.На самом деле, если вы добавите больше слоев в столбец HTML, ваш JS сломается.
function projectCollab() {
var divsToChange = document.querySelectorAll('[data-decision]'),
attr = this.getAttribute('data-collaborate');
for (var i = 0; i < divsToChange.length; i++) {
var d = divsToChange[i];
d.parentNode.parentNode.hidden = ! d.getAttribute('data-decision').includes(attr);
}
return false;
}
var divButtons = document.querySelectorAll('[data-collaborate]');
for (var i = 0; i < divButtons.length; i++) {
divButtons[i].addEventListener('click', projectCollab);
}
.collabProjects:hover,
.collabFiles:hover,
.collabSocially:hover {
box-shadow: 0 0 15px rgba(33, 3, 3, .2);
}
div[data-decision],
div[data-collaborate]{
color: white;
width: 200px;
height: 100px;
}
.decisionTreeBox {
background-color: #4B92DB;
}
#decisionTreeOneDrive {
background-color: #094AB2;
}
#decisionTreeSharePoint {
background-color: #008CE7;
}
#decisionTreeTeams {
background-color: #4A1EBD;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="outer-container">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-4">
<div data-collaborate="shareCollab" class="decisionTreeBox">
Share and Collaborate</div>
</div>
<div class="col-4">
<div data-collaborate="shareExternally" class="decisionTreeBox">
Share Externally</div>
</div>
</div>
<hr />
<div class="row justify-content-center">
<div class="col-4">
<a href="#">
<div data-decision="shareExternally" id="decisionTreeOneDrive">
<h3 id="innerBoxHeadings">OneDrive</h3>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div data-decision="shareCollab shareExternally" id="decisionTreeSharePoint">
<h3 id="innerBoxHeadings">SharePoint</h3>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div data-decision="shareCollab" id="decisionTreeTeams">
<h3 id="innerBoxHeadings">Teams</h3>
</div>
</a>
</div>
</div>
</div>
</div>