Question

我正在学习使用BootStrap，我真的很喜欢它。但是，我偶然发现了一个我无法解决的问题。（我确实试图寻找答案，尝试了一些版本 - 没有工作）。

那应该不那么难，所以我很沮丧。所以就是这样。

我有三个块，当屏幕尺寸减小时，我想要使用漂亮的新行。但事实并非如此。这是代码：

<div class="row" style="padding-top: 54px;">
    <div class="col-md-4">
        <div class="about-why-texts">
            <img src="img/icon-check.png" />
            <div>Telegram deposit system</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="about-why-texts">
            <img src="img/icon-check.png" />
            <div>Safe and secured website</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="about-why-texts">
            <img src="img/icon-check.png" />
            <div>Automated withdrawal system</div>
        </div>
    </div>                                  
</div>

现在，当缩小屏幕宽度时，它们保持相同的像1000ton石头。当屏幕缩小时，我希望它们在3个新行中移动。

任何人都可以告诉我我做错了什么，以及如何解决它。

非常感谢，马雷克。

Answer 1

＆＃13;

.border{
  border:thin black solid;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row text-center" style="padding-top: 54px;">
                                <div class="col-md-4  col-xs-12 border">
                                    <div class="about-why-texts">
                                        <img src="img/icon-check.png" />
                                        <div>Telegram deposit system</div>
                                    </div>
                                </div>
                                <div class="col-md-4  col-xs-12 border">
                                    <div class="about-why-texts">
                                        <img src="img/icon-check.png" />
                                        <div>Safe and secured website</div>
                                    </div>
                                </div>
                                <div class="col-md-4  col-xs-12 border">
                                    <div class="about-why-texts">
                                         <img src="img/icon-check.png" />
                                        <div>Automated withdrawal system</div>
                                    </div>
                                </div>                                  
                            </div>

＆＃13;

这与您正在寻找的相同吗？

这是JSFiddle

希望这有帮助。

Answer 2

你的html中似乎犯了一些错误，这些错误不适合正确使用bootstrap，它与text-center无关，除非你不知道你无法得到什么。

复制下面的HTML以开始使用最小的Bootstrap文档。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

接下来，您应该使用bootstrap容器来包装页面内容：

Bootstrap需要一个包含元素来包装网站内容并容纳我们的网格系统。您可以选择在您的项目中使用两个容器中的一个。请注意，由于填充等原因，两个容器都不可嵌套。

将.container用于响应式固定宽度容器。

<div class="container">
  ...
</div>

将.container-fluid用于全宽容器，跨越视口的整个宽度。

<div class="container-fluid">
  ...
</div>

正确使用Bootstrap Grid

2 个答案: