如何在 Twitter Bootstrap 中有条件地禁用响应性答案

【问题标题】：How to conditionally disable responsive nature in Twitter Bootstrap如何在 Twitter Bootstrap 中有条件地禁用响应性
【发布时间】：2023-04-02 18:16:02
【问题描述】：

我有两个独立的主题桌面和移动。在桌面主题中，我使用了Bootstrap 类。而且我知道Bootstrap 类创建了响应式布局。但我不想要桌面主题中的响应式布局。

请大家帮帮我，如何解决？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>size resolution</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="col-lg-4">
    hello1
</div>
<div class="col-lg-4">
    hello2
</div>
<div class="col-lg-4">
    hello3
</div>
<section>
The online encyclopedia project Wikipedia is by far the most popular wiki-based website, and is one of the most widely viewed sites of any kind in the world, having been ranked in the top ten since 2007.[3] Wikipedia is not a single wiki but rather a collection of hundreds of wikis, one for each language. There are at least tens of thousands of other wikis in use, both public and private, including wikis functioning as knowledge management resources, notetaking tools, community websites, and intranets. The English-language Wikipedia has the largest collection of articles; as of September 2016, it had over five million articles. Ward Cunningham, the developer of the first wiki software, WikiWikiWeb, originally described it as "the simplest online database that could possibly work".[4] "Wiki" (pronounced [ˈwiki][note 1]) is a Hawaiian word meaning "quick".
</section>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
</body>
</html>

【问题讨论】：

并禁用响应式布局。网页内容固定布局，内容宽度不变

标签： javascript jquery css twitter-bootstrap responsive-design

【解决方案1】：

使用col-xs- 而不是col-lg- 前缀使列适用于所有分辨率；）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>size resolution</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="col-xs-4">
    hello1
</div>
<div class="col-xs-4">
    hello2
</div>
<div class="col-xs-4">
    hello3
</div>
<section>
The online encyclopedia project Wikipedia is by far the most popular wiki-based website, and is one of the most widely viewed sites of any kind in the world, having been ranked in the top ten since 2007.[3] Wikipedia is not a single wiki but rather a collection of hundreds of wikis, one for each language. There are at least tens of thousands of other wikis in use, both public and private, including wikis functioning as knowledge management resources, notetaking tools, community websites and intranets. The English-language Wikipedia has the largest collection of articles; as of September 2016, it had over five million articles. Ward Cunningham, the developer of the first wiki software, WikiWikiWeb, originally described it as "the simplest online database that could possibly work".[4] "Wiki" (pronounced [ˈwiki][note 1]) is a Hawaiian word meaning "quick".
</section>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
</body>
</html>

【讨论】：

很高兴它对您有帮助 :) 请将答案标记为已接受...如果您觉得它不错，甚至可以投票；）

【解决方案2】：

如果您不熟悉手动概述Twitter Bootstrap 应用程序，请使用这样的工具。我发现这个工具对于在初始阶段概述 Twitter Bootstrap 应用程序响应式布局非常有帮助。

http://shoelace.io/

【讨论】：

【解决方案3】：

您可以为自己创建一个自定义col-4，您可以定义它的宽度应为 33%。这就是引导程序要做的事情，除了他们对不同类型的屏幕尺寸有这个规则。这使它具有响应性。

如果您不希望它响应，请去掉它的“聪明”，并告诉它是您想要的宽度。

你可以添加一个css：

.col-4-custom {
    width: 33%;
    position: relative;
    float: left;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>size resolution</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
    <style> 
        .col-4-custom {
            width: 33%;
            position: relative;
            float: left;
        }
    </style>
</head>
<body>
  <div class="container">
   <div class="row">
<div class="col-4-custom">
    hello1
</div>
<div class="col-4-custom">
    hello2
</div>
<div class="col-4-custom">
    hello3
</div>
   </div>
  </div>
<section>
The online encyclopedia project Wikipedia is by far the most popular wiki-based website, and is one of the most widely viewed sites of any kind in the world, having been ranked in the top ten since 2007.[3] Wikipedia is not a single wiki but rather a collection of hundreds of wikis, one for each language. There are at least tens of thousands of other wikis in use, both public and private, including wikis functioning as knowledge management resources, notetaking tools, community websites and intranets. The English-language Wikipedia has the largest collection of articles; as of September 2016, it had over five million articles. Ward Cunningham, the developer of the first wiki software, WikiWikiWeb, originally described it as "the simplest online database that could possibly work".[4] "Wiki" (pronounced [ˈwiki][note 1]) is a Hawaiian word meaning "quick".
</section>

   <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</body>
</html>

【讨论】：