css - 移除响应式网站 HTML

Question

<分区>

Answer 1

Bootstrap documentation告诉您如何执行此操作。

1. Omit the viewport mentioned in the CSS docs
2. Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
3. If using navbars, remove all navbar collapsing and expanding behavior.
4. For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.

例如，添加此 CSS(在 Bootstrap CSS 之后):

.container {
    width: 970px !important;
}

然后只使用 col-xs-* 类。例如:

<div class="container">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
</div>

.container {
    width: 970px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="container">
    <div class="col-xs-6">left</div>
    <div class="col-xs-6">right</div>
</div>