Question

我正在尝试为我的表单输入生日，该表单将包含三个下拉菜单。第一个将有天，然后是月，然后是年。

<div class="dropdown" style="position:inline-block">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>

      </div>

这是引导网站上一个下拉菜单的代码。

Answer 1

看看下面的代码

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-lg-4 col-sm-4 col-xs-4">
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  
  <div class="col-lg-4 col-sm-4 col-xs-4">
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </div>
  </div>
  
  <div class="col-lg-4 col-sm-4 col-xs-4">  
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  
</div>

可能对您有帮助。

Answer 2

您可以使用module.exports = { entry: './index.js', output: { path: __dirname + '/dist', filename: 'app.js', }, resolve: { // Add '.ts' and '.tsx' as a resolvable extension. extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.json'], }, module: { loaders: [ { use: 'babel-loader', test: /\.js$/, exclude: /node_modules/ }, { use: 'json-loader', test: /\.json$/ }, ], }, target: 'node', externals: nodeModules, };类使按钮菜单并排。

btn-group

如何使用引导程序并排放置下拉菜单？

2 个答案: