Fatal编程技术网
  • html/
  • Html 元素不在容器内-特别是铬

Html 元素不在容器内-特别是铬

html css twitter-bootstrap

Html 元素不在容器内-特别是铬,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,JSFIDDLE- 注意：我在编程方面非常缺乏经验，你可以从这里过于简单的网站看出这一点 我试图弄明白为什么除了搜索函数之外，所有的东西都在container div之外流动 顺便说一句，我一直在使用Chrome来查看和测试所有编程。我注意到，当我把它放在jsfiddle中时，它看起来不同，所以不确定我在调整和定位所有元素方面做错了什么 下面是代码 HTML: <!DOCTYPE html> <html> <head> <meta htt

JSFIDDLE- 注意：我在编程方面非常缺乏经验，你可以从这里过于简单的网站看出这一点

我试图弄明白为什么除了搜索函数之外，所有的东西都在container div之外流动

顺便说一句，我一直在使用Chrome来查看和测试所有编程。我注意到，当我把它放在jsfiddle中时，它看起来不同，所以不确定我在调整和定位所有元素方面做错了什么

下面是代码

HTML:

<!DOCTYPE html>    
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>      
<body>  
    <div class="container">

        <div class="row">
            <div class="col-md-12 logo"><img src="img/logo.PNG"></div>
        </div>

        <div class="row" style="padding-bottom: 50px;">
            <div class="col-md-2 menu">Dashboard</div>
            <div class="col-md-2 menu">Invoicing</div>
            <div class="col-md-2 menu">Scheduler</div>
            <div class="col-md-2 menu">Employees</div>
            <div class="col-md-2 menu">User Management</div>
            <div class="col-md-2 menu">Customers</div>
        </div>

        <div class="row" style="padding-bottom: 50px;">
            <div class="col-md-2 button">New Employee</div>
            <div class="col-md-2 button">Employee Schedule</div>
            <div class="col-md-6" style="text-align:right">
                <form>
                    <input type="text" placeholder="Search Employees..." required class="searchbox">
                    <input type="button" value="Search" class="searchbutton">
                </form>
            </div>
        </div>

        <div class="row col-md-12">
            <div class="resultbox row"> 
                <div class="table">
                    <div class="col-md-2 table_cell">Name</div>
                    <div class="col-md-2 table_cell">Status</div>
                    <div class="col-md-1 table_cell">Phone</div>
                    <div class="col-md-4 table_cell">Email</div>
                    <div class="col-md-3 table_cell">Title</div>
                    <br><br>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
您有两个主要问题：

1） 您使用的固定宽度元素不考虑视口中的任何更改（即它们不响应），请参见

2） 你没有正确地使用网格系统；例如，这个>
毫无意义。看

我知道这对你来说是新的，所以学习HTML/CSS的基本原理（至少）是非常必要的，这样你就可以了解Bootstrap是如何工作的，同时也可以深入了解它

请参阅下面的工作示例片段，了解如何构造代码。 
/**用于导航**/
/*#导航{
边缘底部：20px；
}*/
部门标志{
填充顶部：20px；
垫底：20px；
}
.navbar#导航菜单{
背景：线性梯度（灰色，#eee）；
边界半径：5px；
边框：1px实心#000；
颜色：#666；
字体大小：粗体；
文本对齐：居中；
}
.navbar#menu>li{
背景：线性梯度（灰色，#eee）；
边界半径：5px；
边框：1px实心#000；
颜色：#666；
字体大小：粗体；
文本对齐：居中；
}
#searchForm.btn.btn-navi{
背景：线性梯度（rgba（212,0,0,0），#795548）；
边框：1px实心#000；
颜色：#666；
字体大小：粗体；
}
div.resultbox{
边缘顶部：20px；
背景：线性梯度（rgba（212,0,0,0），#795548）；
边界半径：5px；
边框：1px实心#000；
颜色：#666；
字体大小：粗体；
}
/**导航栏导航**/
@介质（最小宽度：768px）{
.navbar#导航菜单{
边缘底部：5px；
}
}
@介质（最大宽度：768px）{
div.resultbox{
边际上限：0；
}
}

切换导航

    

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 


新员工
员工时间表
走！
名称
地位
电话
电子邮件
标题
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
某物
效果很好！你看到了什么？你能分享一个屏幕截图吗？我没有看到任何东西从container div流出。我投票结束这个问题，因为这个问题无法重现，也不清楚。Vanburen-非常感谢你的帮助。我羡慕你的才能。我正在研究您提供的代码，以帮助理解和了解为什么您的代码具有更令人印象深刻的输出。我的第一个问题是，我注意到您使用了多个容器，是否有一个特殊的原因，开发人员会在您布局时将页面划分为多个容器？在这个特定的示例中，您可以将所有内容都包含在一个容器中，并且不会改变任何结构方面的内容。我认为，举个例子来说，看到页面结构中的明显差别会有很大帮助，至于是否使用单独的容器（或其他容器），最终取决于特定的应用程序。如果您可以使用更少的代码（并避免重复），那么您应该这样做（这并不总是有意义的，因为您可能需要在容器中设置不同的元素，所以单独使用它们可能更实际）。 
.container
{
    margin:auto auto; 
    width:975px;
}


.resultbox
{
    width:975px;
    height: 500px;
    background: linear-gradient(rgba(212, 0, 0, 0), #795548);
    /*line-height: 50px;*/
    text-align:left;
    border-radius: 5px;
    border: 1px solid #000;
    color: #666;
    font-weight:bold;
}

.logo
{
    padding-top: 20px;
    padding-bottom: 50px;
    padding-left: 0px;
}

.menu 
{
    width: 162px;
    height: 50px;
    background: linear-gradient(gray, #eee);
    line-height: 50px;
    text-align:center;
    border-radius: 5px;
    border: 1px solid #000;
    color: #666;
    font-weight:bold;
    padding-left: 0px;
    padding-right: 0px;


}

.button
{
    width: 150px;
    height: 50px;
    background: linear-gradient(rgba(212, 0, 0, 0), #795548);
    line-height: 50px;
    text-align:center;
    /*border-radius: 5px;*/
    border: 1px solid #000;
    color: #666;
    font-weight:bold;
    padding-left: 0px;
    padding-right: 0px;

}

.table
{
    display:table;
    width:100%;
    table-layout:fixed;
}

.table_cell
{
    display:table-cell;
    width:194px;
    border: solid black 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.searchbox
{
    height: 45px;
    width: 200px;

}
.searchbutton
{
    width: 50px;
    height: 45px;
}