如何使用 Bootstrap 3.1 使我的 CSS 响应

Posted 2023-03-06

【中文标题】如何使用 Bootstrap 3.1 使我的 CSS 响应

【英文标题】：How make my CSS responsive using Bootstrap 3.1

【发布时间】：2014-11-14 09:01:45

【问题描述】：

我用一些 CSS 编写了一个页面。现在我需要使用 Bootstrap 让它响应。但我是新手。

我只需要知道，式。我的 CSS 大部分是内联的：

.slider_sizewidth:750px; height:400px;; float:left;
.right_bannerwidth: 400px; float: right;  overflow: hidden; padding:0 0 0 0; margin:0 0 0 0 ;
.cBothclear: both;
.fleft float:left;
.cbm5 clear:both;
.cat_midwidth: 25%  !important; float: left; padding: 10px  !important; text-align: center; border: 1px;
.mid_cat_brwidth: 100%; border: 1px solid #cfe2f1; height: 400px;

【问题讨论】：

不。我不知道你在问什么。

响应式不是开/关开关。你需要了解更多：getbootstrap.com/getting-started

@jay 只是我需要让我的网站响应......这是我的一些内容的css......我也使用引导程序......所以我需要改变什么我的这个 css....其他任何想法...你能给我...请

【参考方案1】：

不幸的是，您可能想考虑使用 twitter bootstrap 而不是您原来的 css 来重做您的网站。我还注意到您的 css 不使用引导程序中使用的任何类，这意味着您的 html 需要进行重大更改才能使用引导程序的框架。因此，话虽如此，您可能需要从零开始。这是为什么需要响应式第一方法的一个例子。祝你好运！

【参考方案2】：

看起来您为很多元素指定了明确的像素宽度，这将使它们无法响应。此外，从上面的代码来看，您似乎没有使用任何内置的 Bootstrap 类。 Bootstrap 被设计为开箱即用的响应式，但您仍然需要使用它的 div 结构和 CSS 才能使其工作。查看http://getbootstrap.com/getting-started/#examples 并下载他们的源代码以用作模板。

【讨论】：

从您的 cmets 看来，您可能应该阅读更多有关 Bootstrap 的信息。因为它是一个框架，所以你不能只在页面的头部包含他们的 CSS 并让它发挥作用，你必须在你的网站中使用 Bootstrap 类和 HTML 结构。

【参考方案3】：

正如其他人所提到的，让网站具有响应性并不是编辑几行 CSS 的简单问题。 Twitter Bootstrap 的美妙之处在于它利用了开箱即用的响应能力。我的建议是花一些时间学习 Bootstrap 基础和基础知识。 Microsoft 通过 Microsoft Virtual Academy 提供了一个很棒的免费在线课程“使用 Bootstrap 构建响应式 UI”。看看吧：

Microsoft Virtual Academy

【参考方案4】：

虽然您已接受答案，但我想通过分解您的 CSS 代码元素来帮助您。

.slider_sizewidth:750px; height:400px;; float:left;

我假设它是一个简单的滑块；你可以用 Bootstrap (bootstrap carousel slider) 中提供的内置滑块替换它

.right_banner...

对于右对齐，您可以使用此类align-right

等等。基本上，您对 bootstrap 提供的内置类的操作较少。因此重建或编辑您的网站不应该花费很多时间。