Question

我有一个html文件，在Firefox中显示为：

问题是，我想让所有内容都在一个水平行中彼此相邻：

标签Dropdown，
下拉框本身
引导程序nav-pills菜单和
单独的链接。

我的代码是（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>

我尝试过

将css style="display:inline-block"添加到<div>，<ul>和<a>元素
按照https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp所述使用bootstrap grid

但是到目前为止没有任何效果。

Answer 1

使用class="row"将div换行并在divs中将col-*换行

在这里学习：https://getbootstrap.com/docs/4.0/layout/grid/

        $(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'));
            });
        });

    <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>

<header>
  <div class="row">
    <div class="form-group col-5">
      <label for="dd1  col-form-label" >Dropdown:</label>
      <select class="form-control d-inline-block col-8" id="dd1">
        <option>Value1</option>
        <option>Value2</option>
      </select>
    </div> 
       
  <div class="col-7 d-flex">
    <div class="col-9 p-0">
      <ul></ul>
     </div> 
    <div class="col-3 pt-2"> 
     <a href="#">Link</a>
   </div>
  </div>
</div> 
       
</header>

引导程序4：下拉菜单，导航丸和单独的链接在水平线上

1 个答案: