如何在bootstrap中制作下拉式表单？

92dk7w1h 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(190)

我试图模仿facebook下拉好友的请求
下面是一个例子

我目前尝试使用bootstrap，因为不知何故，表单似乎真的很大

这是密码

<ul class="dropdown-menu" id="friendsRequested">           
            <div class="container">
              <div class="row">
                <div class="col-xs-5">
                  <img src="/img/url" />
                  <li><a href="#">JackMoscovi</a></li>
                </div>
                <div class="col-xs-7">
                  <form action="" method="post" accept-charset="UTF-8">
                    <button>Accept</button>
                    <button>Decline</button>
                  </div>
                </form>
              </div>
            </div>
        </ul>

twitter-bootstrap

来源：https://stackoverflow.com/questions/35150333/how-do-i-make-a-dropdown-form-in-bootstrap

2条答案

按热度按时间

jexiocij1#

下面是我在bootply上为你做的一个简单的例子。注意，它只是向你展示它是如何工作的http://www.bootply.com/TM8SUpH9xr
代码如下：

<div class="dropdown clearfix">      
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
      <li><div class="container-fluid">
        <div class="row">
          <div class="col-md-2"><img src="//placehold.it/75x75"></div>
          <div class="col-md-2">Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor. 
Aliquam mauris arcu, tristique a lobortis vitae, condimentum feugiat justo.</div>
        </div>
      </div><a tabindex="-1" href="#">Action</a></li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#">Separated link</a></li>
    </ul>
  </div>

看到容器、行和列的位置了吗？它们都在ul和li中，而放在下拉列表中。所以使用这个例子来满足你的需要。

赞(0）回复(0）举报 2022-12-07

6vl6ewon2#

在您的div中使用此HTML

<li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown            

         <b class="caret"></b></a>
         <ul class="dropdown-menu">
           <li><a href="#"><form role="form">
<div class="form-group">
  <label for="sel1">Select list (select one):</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <br>
  <label for="sel2">Mutiple select list (hold shift to select more than one):</label>
  <select multiple class="form-control" id="sel2">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

</ul>
      </li>

添加这些函数以创建表单

<head>
         <title>.....</title>
         <script type="text/javascript" src="http://code.jquery.com/jquery-  
         latest.js">        
        </script>
        <script type="text/javascript"     
        src="http://twitter.github.com/bootstrap/assets/js/bootstrap-
         dropdown.js">         
      </script>
       <script>
       $(document).ready(function()
        {
        //Handles menu drop down`enter code here`
        $('.dropdown-menu').find('form').click(function (e) {
           e.stopPropagation();
            });
          });
         </script>
          </head>

赞(0）回复(0）举报 2022-12-07

我来回答

如何在bootstrap中制作下拉式表单？

2条答案

相关问题

热门标签

最新问答