Question

JSFIDDLE - https://jsfiddle.net/adtdjog2/ 注意：我在编程方面缺乏经验，你可以通过简单的网站告诉我们。

我试图找出为什么一切都在容器div之外流动，但搜索功能除外？

BTW我一直在使用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>

CSS：

.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;
}

Please see image for overflow

Answer 1

您有两个主要问题：

1）您使用的固定宽度元素不考虑视口中的任何变化（即它们没有响应）请参阅Media Queries

2）你并没有真正正确地使用网格系统;例如，这> <div class="row col-md-12">毫无意义。见Grid System

我知道这对你来说是新的，所以学习HTML / CSS的基本原理（至少）是必不可少的，这样你就可以了解Bootstrap的工作原理以及挖掘Documentation。

请参阅下面的工作示例代码段，了解如何构建代码。

/**For Nav Pills Navigation**/

/*#nav {
    margin-bottom: 20px;
}*/

div.logo {
  padding-top: 20px;
  padding-bottom: 20px;
}
.navbar#nav-menu {
  background: linear-gradient(gray, #eee);
  border-radius: 5px;
  border: 1px solid #000;
  color: #666;
  font-weight: bold;
  text-align: center;
}
.navbar #menu > li {
  background: linear-gradient(gray, #eee);
  border-radius: 5px;
  border: 1px solid #000;
  color: #666;
  font-weight: bold;
  text-align: center;
}
#searchForm .btn.btn-navi {
  background: linear-gradient(rgba(212, 0, 0, 0), #795548);
  border: 1px solid #000;
  color: #666;
  font-weight: bold;
}
div.resultbox {
  margin-top: 20px;
  background: linear-gradient(rgba(212, 0, 0, 0), #795548);
  border-radius: 5px;
  border: 1px solid #000;
  color: #666;
  font-weight: bold;
}
/**For NAVBAR Navigation**/

@media (min-width: 768px) {
  .navbar#nav-menu {
    margin-bottom: 5px;
  }
}
@media (max-width: 768px) {
  div.resultbox {
    margin-top: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="logo">
        <img src="http://placehold.it/1150x300/f00/fff" class="img-responsive" />
      </div>
    </div>
  </div>
</div>
<!--Can be repalced with the below NAV PILLS -->
<div class="container">
  <nav class="navbar navbar-default" id="nav-menu">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-nav">
      <ul class="nav navbar-nav">
        <li><a href="#">Dashboard </a>

        </li>
        <li><a href="#">Invoicing</a>

        </li>
        <li><a href="#">Scheduler</a>

        </li>
        <li><a href="#">Employees</a>

        </li>
        <li><a href="#">User Management</a>

        </li>
        <li><a href="#">Customers</a>

        </li>
      </ul>
    </div>
  </nav>
</div>
<!--Can be used Instead of the above NAVBAR -->
<!--<div class="container">
<div class="row" id="nav">
    <div class="col-sm-12">
        <ul class="nav nav-pills nav-justified" id="menu">
            <li role="presentation"><a href="#">Dashboard</a>

            </li>
            <li role="presentation"><a href="#">Invoicing</a>

            </li>
            <li role="presentation"><a href="#">Scheduler</a>

            </li>
            <li role="presentation"><a href="#">Employees</a>

            </li>
            <li role="presentation"><a href="#">User Management</a>

            </li>
            <li role="presentation"><a href="#">Customers</a>

            </li>
        </ul>
    </div>
</div>
</div>-->
<div class="container">
  <div class="row">
    <form id="searchForm">
      <div class="form-group">
        <div class="col-sm-4">
          <button type="button" class="btn btn-default btn-lg btn-block btn-navi">New Employee</button>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-4">
          <button type="button" class="btn btn-default btn-lg btn-block btn-navi">Employee Schedule</button>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-4">
          <div class="input-group input-group-lg">
            <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
        <button class="btn btn-default btn-lg btn-navi" type="button">Go!</button>
      </span>

          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="resultbox">
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Status</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
          </tr>
          <tr>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
          </tr>
          <tr>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

没有留在容器内的元素 - 特别是铬

1 个答案: