Situation:
I'm in the process of tackling a simple task:
<structure>
<div class="row">
<div class="col-3">
...
</div>
<div class="col-4">
...
</div>
<div class="col-5">
...
</div>
</div>
Each column serves a distinct purpose. To elaborate further, the first column represents a vertical menu, the middle column houses a list of items, and the last column offers detailed information about a selected item from the second column. I am utilizing Angular4 and Bootstrap4 (alongside ng-bootstrap) for this project, despite being fairly new to both frameworks.
Problem:
The initial column functions as intended, displaying the menu with the correct dimensions. However, an issue arises when setting up the second column. Here is the resultant code:
<div class="container-fluid">
<div class="row">
<div id="sidebar" class="col-md-3">
...
</div>
<router-outlet></router-outlet>
<list-of-things ng-version="4.0.3">
<div class="col-md-3">
...
</div>
</list-of-things>
...
</div>
</div><list-of-things ng-version="4.0.3">col-md-3 results in it being proportional to the <list-of-things ng-version="4.0.3">col-md-12, it fills the <list-of-things> box.
Additional Details:
Below is the CSS stack concerning the <list-of-things> directly sourced from the web developer tool.
element {}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
*,
*::after,
*::before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
font-family: "Segoe UI", "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
font-size: 0.9375rem;
font-weight: normal;
line-height: 1.5;
color: #373a3c;
}
body {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #292b2c;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}