prevent wrapping/stacking of columns in bootstrap when shrinking the size?
With bootstrap you want to develop using the smallest device in mind first. This means to use xs on your columns. If you change md to xs your columns should no longer wrap on a smaller device:
bootply
This is an excerpt from bootstrap grid documentation
Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.
Meaning you can combine media queries together such as .col-xs-12 .col-md-8
The flex-nowrap class on the row worked for me in 2020:
<form class="row flex-nowrap">
...
</form>
Ref: Bootstrap 4 - no column wrapping
I think you need to replace col-md-8 with col-xs-8 and col-md-4 with col-xs-4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<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-xs-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-xs-4" id="col4">colmd4
<div class="container-fluid" id="container2">container2
</div>
</div>
</div>
</body>
</html>