Bootstrap响应表和按钮

时间：2017-06-20 18:35:48

标签： html css twitter-bootstrap ngtable

我试图让我的桌子和按钮响应但没有成功。 当我减小屏幕尺寸时按钮没有固定到宽度，下面的表格设置在这个按钮的后面，而不是在它下面。 搜索栏和按钮应固定在导航栏下方。

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

我附上截图和源代码。 full screen half screen small Screen

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

谢谢你们。

1 个答案:

答案 0 :(得分：0)

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

相关问题
最新问题