Question

我正在制作一个简单的网页，作为SQL数据库的前端。我没有添加任何自定义CSS或除普通Bootstrap元素之外的任何自定义代码。下拉项目未对齐，显示在实际下拉按钮的右侧。这是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

dropdown <div>正在扩展到其包含列，而dropdown-toggle未填充，导致dropdown-menu与列对齐，而不是{ {1}}。这个解决方案并不通用，但我认为最适合像你这样的快速解决方案：

CSS：

button

或

HTML：

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

Bootstrap下拉项目未正确对齐

1 个答案: