Question

我试图模仿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>

Answer 1

这是我在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里面，因为它们被放置在下拉列表中。因此，请使用此示例来满足您的需求。

Answer 2

在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>

添加添加这些功能ro make Form

        <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>

如何在bootstrap中创建下拉表单？

2 个答案: