I am facing some unusual behaviors while using Bootstrap in my current project. It seems to be the first time I have encountered such issues.
Below is the HTML code snippet:
<div class="row" style="background-color: blue; padding: 2rem; width: 100%;">
<div class="col-6" style="background-color: yellow;">
<label for="useProdAddress">
<input type="checkbox"id="useProdAddress">
Use Producer Address
</label>
</div>
<div class="col-6" style="background-color: orange;">
<button class="btn btn-outline-secondary">
Add Address
</button>
</div>
</div>https://i.sstatic.net/r9M0y.png
From the screenshot above, it can be observed that the content only occupies about one-third of the page despite setting the width to 100%. This issue persists even after making adjustments.
However, I noticed that the following solutions are effective:
Specifying px or rem for the width attribute results in a wider row display.
Inserting text or form elements like the example below:
<div class="col-6" style="background-color: orange;"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p> </div>
https://i.sstatic.net/e573I.png
I am wondering if the use of the nav angular-bootstrap component could be causing these rendering issues.
<div class="d-flex">
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills" orientation="vertical">
...
<li ngbNavItem="locations">
<a ngbNavLink>Locations</a>
<ng-template ngbNavContent>
<app-locations></app-locations>
</ng-template>
</li>
...
</ul>
<div [ngbNavOutlet]="nav" class="ms-4"></div>
Your assistance will be highly appreciated. Thank you.