Fatal编程技术网
  • html/
  • Html 为什么我的div在页面中排列不好？

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

html css twitter-bootstrap

Html 为什么我的div在页面中排列不好？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我想使用引导功能来安排一个html页面，但是当我把它们放在容器中时，一个div在页面的顶部，其他div在底部。使用引导来安排页面的正确方式是什么 这是我的页面： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Settings</title> <link rel="stylesheet" href="cs

我想使用引导功能来安排一个html页面，但是当我把它们放在容器中时，一个div在页面的顶部，其他div在底部。使用引导来安排页面的正确方式是什么

这是我的页面：

<!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>


设置
创建位置
创建角色
创建部门
增加法定假日
&时代；
地点名称
接近
&时代；
角色名
接近
&时代；
部门名称
接近
这就是它的排列方式：

因为您将它们都放在一个单独的
行中。您需要做的是，将它们放在相同的
行中
，而且，您的
col-xs-12
实际上没有做任何事情来将其排成一行。因此，您需要在html中指定希望按钮在更大的屏幕（如桌面）上内联。
如果你想把按钮放在桌面上的
行中，你需要把它们放在合适的行中。
假设你有6个按钮。然后您可以使用
col-md-2
as 12/6=2。或者根据这些链接/按钮的长度，您可以在
col-md-x
中更改x

在这里。这会说明我的意思。您可能需要放大预览面板


<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>




创建位置
创建角色
创建部门
增加法定假日

尝试将
更改为
，但不显示应用的CSS。我们无法告诉您出了什么问题。也许是因为左边menu@Justinas除了导航栏之外，没有其他css（从
HTML
code中可以看到），css
col-xs-12
->这样做的单元格与container.Yeas一样长。是我。我读了所有的帖子。我想说的是，你错误地说，
col-xs-12
在桌面上什么都不做——这是第一次。如果您查看
bootstrap
的css，就会发现它在桌面上工作正常。而
col-xs-12
仅当有其他类在更大的显示器上工作时才起作用，如
col-md-x
或
col-lg-x
，这可能不是由byt左导航菜单的
bootstrap
引起的。和->div位于页面末尾的主要问题。Col-xs-12将在桌面和移动设备上工作。确定。我知道你从哪里来。我会更新我的意思。