自举响应表和按钮

Question

我想让我的表和按钮响应但没有成功。 当我减小屏幕的大小时，按钮的宽度不固定，并且下面的表格设置在此按钮的后面，而不是像下面那样。 搜索栏和按钮应该固定在导航栏下方。

该系统就像一个管理系统，我从其他系统显示日志（从MongoDB获取数据）。

我附上截图和源代码。

HTML的

<header> 
      <div class="navbar navbar-inverse navbar-fixed-top"> 
       <div class="container-fluid"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span>       
         </button> 
         <a class="brand" href="#"> 
         <img src="./image/logoC.png"> 
         </a> 
        </div> 
        <div class="collapse navbar-collapse" id="myNavbar"> 
         <ul class="nav navbar-nav"> 
          <li><a href="#" ng-click="getLogs('login')"><i class="fa fa-sign-in fa-fw"></i>Logins</a> 
          </li> 
          <li><a href="#" ng-click="getLogs('signUp')"><i class="fa fa-user-plus fa-fw"></i>Signup</a> 
          </li> 
          <li><a href="#" ng-click="getLogs('addErr')"><i class="fa fa-exclamation-circle fa-fw"></i>Add Items Errors</a> 
          </li> 
          <li><a href="#" ng-click="getLogs('refreshLog')"><i class="fa fa-retweet fa-fw"></i>Refresh Log</a> 
          </li> 
          <li><a href="#" ng-click="getLogs('refreshErr')">Refresh Errors</a> 
          </li> 
          <li><a href="#" ng-click="getLogs('badProd')">Bad Product</a> 
          </li> 
          <li><a href="#"><i class="fa fa-refresh fa-fw"></i>Refresh All</a> 
          </li> 
         </ul> 
         <ul class="nav navbar-nav navbar-right"> 
          <li><a href="#" ng-click="logOut()" id="logout"><i class="fa fa-sign-out fa-fw"></i>Logout</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </header> 

     <div class="table_content"> 
       <div class="row"> 
        <div class="options"> 
         <div class="col-sm-4"> 
         <form class="searchBox"> 
          <div class="form-group"> 
           <div class="input-group"> 
            <div class="input-group-addon"><i class="fa fa-search"></i> 
            </div> 
            <input type="text" class="form-control" ng-model="searchLogins"> 
           </div> 
          </div> 
         </form> 
         </div> 
         <div class="col-sm-8"> 
         <ul class="pager" ng-show="currentPage==login"> 
          <li> 
           <button id="markAsHandled" name="markAsHandled" class="btn btn-success" ng-click="handle()" value="Handle">Mark as Handled</button> 
          </li> 
          <li> 
           <button id="deleteError" name="deleteError" class="btn btn-danger" ng-click="remove()" value="Remove">Delete Errors</button> 
          </li> 
          <li> 
           <button id="select_all" name="deleteError" class="btn btn-info" ng-model="selectedAll" ng-click="checkAll()">Select All</button> 
          </li> 
          <li> 
           <button ng-click="removeLogs()" id="deleteAllErrors" name="deleteError" class="btn btn-danger">Remove All</button> 
          </li> 
          </ul> 
         <h5 id="statusMessage">{{statusMsg}}</h5> 
         </div> 
        </div> 
       </div> 
      </div> 

       <div class="tableAdmin"> 
        <table ng-table="tableParams" class="table table-striped" show-filter="true"> 
         <tr ng-repeat="log in $data| orderBy:sortType:sortReverse | filter : searchLogins"> 
          <td data-title="'ID'"> 
           {{log._id}} 
          </td> 
          <td data-title="'Data'"> 
           {{log.logData}} 
          </td> 
          <td data-title="'Date'"> 
           {{log.logDate}} 
          </td> 
          <td data-title="'Handled'"> 
           <input type="checkbox" ng-model="log.selected" /> 
          </td> 
         </tr> 
        </table> 
       </div> 

      <footer class="footer"> 
       <div class="container"> 
        <div class="row"> 
         <div class="span9"> 
          <p class="text-muted">Copyright &copy; 2017 - Designed &amp; Developed by me.</p> 
         </div> 
        </div> 
       </div> 
      </footer> 
    </div> 

CSS-

html { 
    width: 100%; 
    height: 100%; 
} 
body { 
    font-family: 'Lato', Calibri, Arial, sans-serif; 
    background: #f9f9f9; 
    font-weight: 300; 
    font-size: 15px; 
    overflow: scroll; 
    overflow-x: hidden; 
    width: 100%; 
    height: 100%; 
} 
.btn { 
    font-weight: 400; 
    width: 100px; 
    height: 36px; 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    user-select: none; 
    cursor: pointer; 
} 
#markAsHandled { 
    width: 130px; 
    margin-right: 5px; 
    float: left; 
} 
#deleteError { 
    width: 110px; 
    margin-right: 5px; 
    float: left; 
} 
#select_all { 
    width: 110px; 
    margin-right: 15px; 
    float: left; 
} 
#deleteAllErrors { 
    width: 110px; 
    float: left; 
} 
#statusMessage { 
    float: left; 
    margin-left: 10px; 
    padding-top: 10px; 
} 
.table { 
    width: 80%; 
    height: 100%; 
    margin-top: 55px; 
    margin-left: 6px; 
} 
#ID_column { 
    width: 230px; 
} 
#user_column { 
    width: 230px; 
} 
#date_column { 
    width: 230px; 
} 
#handled_column { 
    width: 100px; 
} 
input[type="radio"], 
input[type="checkbox"] { 
    line-height: normal; 
    margin-left: 50px; 
} 
.btn-success { 
    margin-left: 26px; 
    width: 100px; 
} 
    @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 
*, 
*:after, 
*:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 0; 
    margin: 0; 
} 
.ckbox { 
    position: relative; 
} 
.ckbox input[type="checkbox"] { 
    opacity: 0; 
} 
.table_content { 
    width: 100%; 
    margin-top: 66px; 
} 
td { 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
} 
.searchBox { 
    float: left; 
    width: 400px; 
    margin: 10px 0 0 0; 
} 
/*Menu Options*/ 
.options { 
    float: left; 
    width: 100%; 
    height: 50px; 
    position: fixed; 
    display: block; 
    padding-left: 10px; 
    background-color: #f9f9f9; 
    z-index: 1000; 
} 
.pager { 
    float: left; 
    margin: 10px 0 0 10px; 
} 
.tableAdmin { 
    width: 100%; 
    padding-top: 20px; 
    padding-left: 50px; 
} 
.badgebox { 
    opacity: 0; 
} 
.badgebox + .badge { 
    text-indent: -999999px; 
    width: 27px; 
} 
.badgebox:focus + .badge { 
    box-shadow: inset 0px 0px 5px; 
} 
.badgebox:checked + .badge { 
    text-indent: 0; 
} 
#div1 { 
    height: 50px; 
    width: 100%; 
    margin-left: 35%; 
} 
footer { 
    padding: 50px 0; 
    height: auto; 
    text-align: center; 
} 

谢谢你们。

Answer 1

我已经通过减小搜索区域的大小和按钮的大小来解决此问题。