Bootstrap下拉项未正确对齐

Question

I am making a simple webpage that is acting as a front-end for a SQL database. 我正在制作一个简单的网页，充当SQL数据库的前端。 I have not added any custom CSS or any custom code other than plain Bootstrap elements. 除了普通的Bootstrap元素外，我没有添加任何自定义CSS或任何自定义代码。 The dropdown items are not aligned and appear to the right of the actual dropdown button. 下拉菜单项未对齐，并显示在实际下拉菜单按钮的右侧。 Here is the HTML 这是HTML

<!DOCTYPE html>
<html>
    <head>
        <title>No Fail Sales Database</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript">
            function showAbout(){
                $('#aboutModal').modal('toggle');
            }
        </script>

        <link href="bootstrap.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>

        <!--------------- BEGIN ABOUT MODAL ---------------------->
        <div class="container" align="center">
            <div id="aboutModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
                <div class="modal-dialog"> 
                    <div class="modal-content" >  
                        <div class="modal-header">  
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">About Us</h4>
                        </div>   
                        <div class="modal-body"> 
                            <p class="lead">This site contains a front-end interface for our project: No Fail Sales</p>
                            <p class="lead">Project Members: Anthony Bonarrigo, Brian Keiran, Cesar Nascimento</p>
                        </div> <!--END BODY-->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div><!--END FOOTER-->
                    </div> 
                </div>
            </div>
        </div>
        <!------------------------- END ABOUT MODAL --------------------->


        <!------------------------ BEGIN JUMBOTRON/HEADER --------------->
        <div class="jumbotron" id="db_header">
            <div class="container">
                <h1 style="text-align: center">No Fail Sales</h1>
                <p style="text-align: center">A UI for database for No Fail Sales
                    <br><br><br><button type="button" class="btn btn-default" onclick="showAbout()">About</button></p>
                </div>
        </div> 
        <!------------------------END JUMBOTRON ------------------------>

        <!------------------------BEGIN INPUT FIELDS--------------------->
        <div class="container">  
            <div class="row">
                <div class="col-xs-4">
                    <h2 style="text-align: center">Query by Product</h2>
                    <div class="input-group">
                        <input method="GET" type="text" class="form-control" placeholder="Search for...">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">Go!</button>
                        </span>
                    </div>
                </div>
                <div id="q_seller" class="col-xs-4" align="center">
                    <h2 style="text-align: center">Query by Seller</h2>
                    <div class="input-group">
                        <input method="GET" type="text" class="form-control" placeholder="Search for...">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">Go!</button>
                        </span>
                    </div>
                </div>
                <!-----------------END INPUT FIELDS-------------------->

                <!-----------------GENERATE THE DROPDOWN--------------->
                <div class="col-xs-4" align="center">
                    <h2 style="text-align: center">Search by Category</h2>
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="categoryDropdown" data-toggle="dropdown" aria-expanded="true">
                        Category
                        <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="categoryDropdown">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Clothing</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Electronics</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cleaning Supplies</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Office Supplies</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sports Equipment</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Health and Beauty</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Jewelry</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Automotive</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Food and Drink</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Lawn and Garden</a></li>
                        </ul>
                    </div>
                </div>
                <!----------------END DROPDOWN---------------------->
            </div>
            <!--------------------END INPUT AREA-------------------> 
        </div>

        <!--Placed at end of page so it loads faster-->
        <script src="jquery.js"></script>
        <script src="bootstrap.js"></script>
    </body>
</html>

Answer 1

Your dropdown <div> is expanding to the full with of its containing column while the dropdown-toggle is not, causing the dropdown-menu to align with the column instead of the button . 您的dropdown <div>扩展到其包含列的全部，而dropdown-toggle没有展开，导致dropdown-menu与列而不是button对齐。 This solution isn't general but I think it best for a quick fix like yours: 这个解决方案不是一般性的，但我认为最适合像您这样的快速解决方案：

CSS: CSS：

.dropdown {
  width: 100px;
}
.dropdown .dropdown-toggle {
  width: 100%;
}

or 要么

HTML: HTML：

<div style="width: 100px;" class="dropdown">
  <button style="width: 100%;" class="btn btn-default dropdown-toggle" type="button" id="categoryDropdown" data-toggle="dropdown" aria-expanded="true">

Bootstrap下拉项未正确对齐

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-04-15 18:37:32

Bootstrap下拉项未正确对齐

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-04-15 18:37:32

解决方案1
1 已采纳 2015-04-15 18:37:32