Question

我有两个独立的主题桌面和移动设备。在桌面主题中，我使用了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>

Answer 1

使用col-xs-代替col-lg-前缀，让列适用于所有分辨率;）

＆＃13;

<!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>

＆＃13;

Answer 2

您可以为自己制作自定义col-4，您可以定义它应该是33％宽。这是关于bootstrap将要做什么，除了他们有不同类型的屏幕尺寸的规则。这使它具有响应性。

如果你不想让它具有响应性，请从中取出“聪明”，然后告诉它你想要它的宽度。

你可以添加一个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>

Answer 3

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

http://shoelace.io/

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

3 个答案: