小编Ty *_*uty的帖子

如何修剪Bootstrap下拉菜单以适应内容?

我的网站编码经验有限.我正在尝试将bootstrap实现到我的网站中,特别是通过使用它创建一个导航栏.它工作得很好,除了当我点击下拉菜单的登录按钮时,菜单对于内容来说太宽了.我使用css样式表将用户名和密码表单对齐到下拉菜单的右侧,但表单左侧仍有太多的空格.

例如,我更倾向于将其缩减到"新闻简报"按钮的开头.

网站可以在这里找到:my_test_site

码:

            <li><a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Login <b class = "caret"></b></a>
                <div class = "dropdown-menu dropdown-menu-right">
                    <div class="container">
                        <form class="form-inline" role="form" id="username">
                                <div class="form-group">
                                    <label for="username">Username:</label>
                                    <input type="username" class="form-control" id="email" placeholder="username">
                                </div>
                                <div class="form-group" id="password">
                                    <label for="pwd">Password:</label>
                                    <input type="password" class="form-control" id="pwd" placeholder="password">
                                </div>
                                <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div>
                </div>
            </li>
        </ul>
Run Code Online (Sandbox Code Playgroud)

html css web twitter-bootstrap drop-down-menu

6
推荐指数
1
解决办法
4827
查看次数

标签 统计

css ×1

drop-down-menu ×1

html ×1

twitter-bootstrap ×1

web ×1