Looking to implement a nested grid within a parent grid in Bootstrap 3.3.7.
Check out the HTML below:
Parent component
<div>
<div class="row">
<div class="col-md-3 border">.col-md-3</div> //
<div class="col-md-9 border">
<nested-app></nested-app> // should have 9 cols
</div>
</div>
</div>
Nested component // Should have 9 cols
<div class="row">
<div class="col-md-1 border">.col-md</div>
<div class="col-md-3 border">.col-md-4</div>
<div class="col-md-4 border">.col-md-4</div>
<div class="col-md-4 border">.col-md-4</div>
</div>
Encountering an issue where the width of col-md-1 within the nested component is different from that in the parent component.
Hence, how can the column width be aligned with the parent grid in a nested scenario?