Question

我设法将表格的宽度和边距位置设置为margin-left:-240px;当我调整窗口大小时，我应该以引导格式设置表格。但是，当我调整窗口大小时，桌面位置似乎与其位置有点偏差。如何在不影响引导格式的情况下将表设置为margin-left？

<div class="container">
        <div class="row">
            <div class="panel panel-primary filterable">
                <div class="panel-heading">
                    <h3 class="panel-title">Hi there</h3>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr class="filters">
                                    <th class="col-md-2"><input type="text" class="form-control" placeholder="Type" disabled></th>
                                    <th class="col-md-2"><input type="text" class="form-control" placeholder="Course" disabled></th>
                                    <th class="col-md-2"><input type="text" class="form-control" placeholder="Description" disabled></th>
                                    <th class="col-md-1"><input type="text" class="form-control" placeholder="Credit" disabled></th>
                                    <th class="col-md-2"><input type="text" class="form-control" placeholder="Hourly" disabled></th>
                                    <th class="col-md-2"><input type="text" class="form-control" placeholder="Profile" disabled></th>
                                    <th class="col-md-3"><input type="text" class="form-control" placeholder="Book" disabled></th>
                                </tr>
                        </thead>
                        <tbody>
                            <tr class="text-nowrap">
                                <td>3/8/2015</td>
                                <td>1:15 PM</td>
                                <td>Field 7</td>
                                <td>Commingles</td>
                                <td>Jello Shot Jockeys</td>   
                                <td>Jello Shot Jockeys</td>
                                <td>Jello Shot Jockeys</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

mystyle.css

.filterable {
    margin-top: 30px;
    width:140%;
    margin-left:-240px;
}
.filterable .panel-heading .pull-right {
    margin-top: -90px;
}
.filterable .filters input[disabled] {
    background-color: transparent;
    border: none;
    cursor: auto;
    box-shadow: none;
    padding: 0;
    height: auto;
}
.filterable .filters input[disabled]::-webkit-input-placeholder {
    color: black;
}
.filterable .filters input[disabled]::-moz-placeholder {
    color: black;
}
.filterable .filters input[disabled]:-ms-input-placeholder {
    color: black;
}

Answer 1

<div class="container-fluid">
  ---- navbar here ----
  <div class="row" style="top:100px">

    <!-- ----------- left margin ----------------- -->  
    <div class="col-md-2"></div>

    <div class="col-md-10">
       --- Your table here ---
    </div>

    <!-- ----------- right margin ---------------- -->  
    <div class="col-md-2"></div>
  </div>
</div>

Bootstrap表位置调整

1 个答案: