0

大家好，我已经通过它搜索了很多次，这是我第一次发布^^，我的问题是：我如何使用 bootstrap 3 将两个按钮放在同一行，而只更改 HTML？

<div class="container">
        <ul class="nav navbar-nav pull-right" >            


         <li class="dropdown">

         <a class="dropdown-toggle " href="#" data-toggle="dropdown">
            Login
            </a>  

          <div class="dropdown-menu">
            <form class="navbar-form" role="form">

           <p> 
            <input class="form-control" type="text" placeholder="E-mail" />
           </p>


            <p> 
             <input class="form-control" type="password" placeholder="Contrasenya" />
            </p>


             <button type="submit" class="btn btn-primary">Sing in</button>
             <button type="submit" class="btn btn-success">Log in</button>






            </form>
           </div>

          </li>

        </ul>
      </div>

我有的

我想要的是

PD：对不起我的英语
PD2：对不起，如果这是一个愚蠢的问题，但我已经尝试了 2 个小时，但我找不到解决方案 :(

4

2 回答 2

1

你的代码对我来说似乎很好用。这是一个工作小提琴。我刚刚清理了一些代码格式。

HTML：

<div class="container">
    <ul class="nav navbar-nav pull-right">
        <li class="dropdown">
            <a class="dropdown-toggle" href="#" data-toggle="dropdown">Login</a> 
            <div class="dropdown-menu">
                <form class="navbar-form" role="form">
                    <p><input class="form-control" type="text" placeholder="E-mail" /></p>
                    <p><input class="form-control" type="password" placeholder="Contrasenya" /></p>
                    <button type="submit" class="btn btn-primary">Sign in</button>
                    <button type="submit" class="btn btn-success">Log in</button>
                </form>
            </div>
        </li>
    </ul>
</div>

页面上唯一的其他资源是bootstrap.min.css、bootstrap.min.js和 jQuery 1.9.1。

于 2013-10-20T15:03:31.680 回答
0

我认为如果不修改 CSS，就无法获得你想要的东西。我已经在输入中尝试了一些东西.form-group，.col-md-4但效果不佳（下拉菜单内的表单组中没有边距底部，您需要通过 CSS 进行编辑）。Bootstrap.dropdown-menu具有min-width: 160px. 您需要覆盖以下内容：

.dropdown-menu {
  min-width: 200px;
}

检查 jsFiddle 示例。

于 2013-10-20T15:09:56.947 回答