Menu
I want to prevent the stacking of col-md-8 on col-md-4 using "nowrap" or any other alternative in the same way i did for the (Unordered list).
Below is my snippet and i have also mentioned the classes of each box with colors.
Thank you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#outside-container {
border: 2px solid red;
height: 500px;
white-space: nowrap;
}
#container1 {
border: 2px solid green;
height: 300px;
}
#colmd8 {
border: 2px solid yellow;
height: 400px;
}
#row1 {
border: 2px solid pink;
}
#list1 {
border: 2px solid red;
width: 200px;
height: 200px;
}
#container2 {
border: 2px solid navy;
height: 300px;
}
li {
display: inline-block;
}
ul {
white-space: nowrap;
}
#col4 {
border: 2px groove darksalmon;
}
</style>
<body>
<div class="container-fluid" id="outside-container">
<div class="col-md-8" id="colmd8">colmd8
<div class="container-fluid" id="container1">container1
<div class="row" id="row1">row1
<ul class="col-md-12 list-inline" id="colmd3" style="list-style: none">
<li id="list1">
<a href="#"></a>
</li>
<li id="list1">
<a href="#"></a>
</li>
<li id="list1">
<a href="#"></a>
</li>
<li id="list1">
<a href="#"></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4" id="col4">colmd4
<div class="container-fluid" id="container2">container2
</div>
</div>
</div>
</body>bootply
828
The flex-nowrap class on the row worked for me in 2020:
<form class="row flex-nowrap">
...
</form>
Ref: Bootstrap 4 - no column wrapping
61
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
