html - 使用 Bootstrap 将 Logo 与 ASP.NET MVC 4 上的输入字段对齐

Question

我正在使用 Visual Studio 2012 ASP.NET MVC4 设计一个网站

应该是这样的

---

---

结果是这样的

---

![默认2][2]

---

我需要将 Logo 与用户名和密码字段对齐，并且这些字段之间应该有空格。顺便说一句，我使用最新版本的 Twitter Bootstrap 作为我的 CSS。感谢您的帮助!

此外，这些是我的代码。

 <header class="navbar navbar-inverse" role="banner">
            <div class="container">
                <img src="@Url.Content("~/Content/img/Logo-Sample.png")" alt="Image" id="logo" class="img-responsive"/>
                            <div class="pull-right">

                                <form class="navbar-form pull-right" role="form">

                             <div class="form-group">
                                 <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
                             </div>

                             <div class="form-group">
                                 <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
                             </div>
                             <div class="checkbox">
                                 <label>
                                     <input type="checkbox"> Remember me
                                 </label>
                             </div>
                                 <button type="submit" class="btn btn-default">Sign in</button>
                                </form>
                            </div>              
              </div>






    </header>

更新:

我应用了 Ryan 的建议“ float 内容”，现在 Logo 与输入字段内联。

但是输入框是向上而不是向下。对此有什么建议吗？谢谢!

Answer 1

查看 Bootstrap's docs for Inline forms .我相信这正是您要找的。

作为旁注，查看 TwitterBootstrapMVC .您的代码可能看起来更清晰。