Trying to achieve a layout in Firefox where everything is displayed in one single horizontal row. This includes the label Dropdown, dropdown box itself, bootstrap nav-pills menu, and separate link.
Code snippet: (jsfiddle: https://jsfiddle.net/aq9Laaew/162055/):
$(document).ready(function() {
let menus = ['Menu1', 'Menu2', 'Menu3'];
$('header ul').addClass("nav nav-pills");
for (let m of menus) {
$('header ul').append(`<li class="nav-item">
<a class="nav-link" data-value="${m}" data-toggle="pill" href="#">${m}</a>
</li>`);
}
$('header a').first().addClass('active');
$('header a').click(function() {
console.log($(this).data('value'));
});
});<meta charset='utf-8' />
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<body>
<header>
<div class="form-group">
<label for="dd1">Dropdown:</label>
<select class="form-control" id="dd1">
<option>Value1</option>
<option>Value2</option>
</select>
</div>
<ul></ul>
<a href="#">Seperate Link</a>
</header>
</body>
</html>Tried solutions include:
- Adding css style="display:inline-block" to div, ul, and a elements
- Using bootstrap grid as described in https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp
Still facing issues with the layout. Any suggestions?