Question

我想使用bootstrap功能安排一个html页面，但是当我将它们放在容器中时，div位于页面的顶部，而其他div位于底部。使用bootstrap安排页面的正确方法是什么？

这是我的页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Settings</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/navbar.css"/>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
<div class="icon-bar" style="float: left">
    <div class="employee"><a href="/"><i class="fa fa-home"></i></a></div>
    <div class="employee"><a href="summary.html"><i class="fa fa-info"></i></a><!--Summary--></div>
    <div class="employee"><a href="planDetails.html"><i class="fa fa-globe"></i></a><!--Plan details--></div>
    <div class="employee"><a href="newRequest.html"><i class="fa fa-building-o"></i></a><!--Company holidays--></div>
    <div class="employee"><a href="teamCalendar.html"><i class="fa fa-calendar-check-o"></i></a><!--Team calendar-->
    </div>
    <div id="manager"><a href="pendingRequests.html"><i class="fa fa-clock-o"><span
            class="badge badge-notify hidden"></span></i></a><!--Pending requests--></div>
    <div id="hr"><a href="settings.html"><i class="fa fa-cog"></i></a><!--Settings button--></div>
    <div class="employee"><a href="/logout"><i class="fa fa-power-off"></i></a></div>
</div>

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <a href="adduser.html" class="btn-success btn">Create user</a>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <button id="addLocation" class="btn-success btn">Create location</button>
        </div>
    </div>
    <div>
        <div class="col-xs-12">
            <button id="addRole" class="btn-success btn">Create role</button>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <button id="addDepartment" class="btn-success btn">Create department</button>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <button id="addOfficialHoliday" class="btn-success btn">Add official Holiday</button>
        </div>
    </div>
    <div class="row">
        <h4 id="successMessage"></h4>
    </div>
</div>

<div id="locationModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Location name</h4>
            </div>
            <div class="modal-body">
                <form id="locationForm">
                    <input type="text" required='' id="locationName" name="name"/>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" id="locationBtn" value="Add new location"/>
                        <div id="alert" style='float: left; color: red'></div>
                    </div>
                </form>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="roleModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Role name</h4>
            </div>
            <div class="modal-body">
                <form id="roleForm">
                    <input type="text" required='' id="roleName" name="name"/>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" id="roleBtn" value="Add new role"/>
                    </div>
                </form>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="departmentModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Department name</h4>
            </div>
            <div class="modal-body">
                <form id="departmentForm">
                    <input type="text" required='' id="departmentName" name="name"/>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" id="departmentBtn" value="Add new department"/>
                    </div>
                </form>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--Include jQuery-->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.serializeObject.min.js"></script>
<!--Include js created for this page-->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/navbar.js"></script>
<script type="text/javascript" src="js/settings.js"></script>
<script type="text/javascript" src="js/notify.js"></script>

</body>
</html>

这是如何安排的：

Answer 1

因为您已将它们全部放在单独的row中。您需要做的是，将它们放在同一个row中，并且您的col-xs-12并没有真正做任何事情来使它成为一个整体。所以你需要在你的html中指定你希望按钮在像桌面这样的大屏幕上内联。如果您想在桌面上的row中使用按钮，则需要将它们放在适合的行中。让我们说你有6个按钮。那么您可以使用col-md-2作为12/6 = 2.或者根据这些链接/按钮的长度，您可以在col-md-x中更改x。

这里。 this plunk将显示我的意思。您可能需要放大预览面板。

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-2">
      <a href="adduser.html" class="btn-success btn">Create user</a>
    </div>
    <div class="col-xs-12 col-md-2">
      <button id="addLocation" class="btn-success btn">Create location</button>
    </div>
    <div class="col-xs-12 col-md-2">
      <button id="addRole" class="btn-success btn">Create role</button>
    </div>
    <div class="col-xs-12 col-md-2">
      <button id="addDepartment" class="btn-success btn">Create department</button>
    </div>
    <div class="col-xs-12 col-md-2">
      <button id="addOfficialHoliday" class="btn-success btn">Add official Holiday</button>
    </div>
  </div>
  <div class="row">
    <h4 id="successMessage"></h4>
  </div>
</div>

为什么我的div在页面中排列不好？

1 个答案: