Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/sql/81.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Twitter bootstrap 如何使用bootstrap集中我的内容?_Twitter Bootstrap - Fatal编程技术网

Twitter bootstrap 如何使用bootstrap集中我的内容?

Twitter bootstrap 如何使用bootstrap集中我的内容?,twitter-bootstrap,Twitter Bootstrap,我在读关于这个主题的文章。然而,由于这是我创建一个只关注引导的网站的第一天,我仍然在学习基础知识,所以我为任何错误提前道歉 我试图一个接一个地集中我的所有内容。然而,我的图像看起来并不居中。如何使其居中并与标题和三个框对齐 我的完整代码如下 .body{ 保证金:0; 填充:0; } .标题标题{ 文本对齐:居中; 颜色:黑色; 字体大小:粗体; 字体系列:“Roboto”,无衬线; } .简介文本{ 文本对齐:居中; 颜色:黑色; 字体系列:“Roboto”,无衬线; } p{ 文本对齐:居

我在读关于这个主题的文章。然而,由于这是我创建一个只关注引导的网站的第一天,我仍然在学习基础知识,所以我为任何错误提前道歉

我试图一个接一个地集中我的所有内容。然而,我的图像看起来并不居中。如何使其居中并与标题和三个框对齐

我的完整代码如下

.body{
保证金:0;
填充:0;
}
.标题标题{
文本对齐:居中;
颜色:黑色;
字体大小:粗体;
字体系列:“Roboto”,无衬线;
}
.简介文本{
文本对齐:居中;
颜色:黑色;
字体系列:“Roboto”,无衬线;
}
p{
文本对齐:居中;
颜色:黑色;
字体系列:“Roboto”,无衬线;
}
.中央大厦{
显示:块;
左边距:自动;
右边距:自动;
高度:250px;
宽度:250px;
边界半径:25px;
背景:#4D5061;
}

关于我
第1栏
我爱你,我爱你,我爱你

但是,我们必须尽可能少地进行实验

第2栏 我爱你,我爱你,我爱你

但是,我们必须尽可能少地进行实验

第3栏 我爱你,我爱你,我爱你

但是,我们必须尽可能少地进行实验


仅将第58行的类从“容器”更改为“行”,类“容器”在左侧和右侧添加填充

第58行


改为:

    <div class="row">

您的容器应该包含您的所有网页,发布一个。 其次,您已经调整了影响图像的图像块的核心css

此外,引导是在12网格系统。在设计网页时,请使用此选项

这是线框设计,它应该做你想要的。你将需要改变内容,以适应,但布局是我认为你所追求的

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h3 class="text-center">
                h3. Lorem ipsum dolor sit amet.
            </h3>
        </div>
    </div>
    <div class="row">
        <div class="col-md-5">
        </div>
        <div class="col-md-2">
            <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" />
        </div>
        <div class="col-md-5">
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <p>
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
        </div>
        <div class="col-md-4">
            <p>
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
        </div>
        <div class="col-md-4">
            <p>
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
        </div>
    </div>
</div>

h3。Lorem ipsum dolor sit amet。

Lorem ipsum dolor sit amet,献祭精英。Aliquam eget sapien sapien。梅图斯乌纳的库拉比图尔。在hac habitasse Plateum,一句名言。Phasellus eu sem sapien,sed vestabulum velit。Nam purus nibh,lacinia non faucibus et,dolor的pharetra。这是我的心愿。Morbi commodo sodales nisi id sodales。这是一种常见的饮食习惯,是一种健康的饮食习惯,是一种健康的饮食习惯。在马萨马格纳的项目中,对nec、nec、posuere nec lacus进行了广泛的讨论。我的爱人,我的爱人,我的精英。不允许有任何违反欧盟法律的行为。

Lorem ipsum dolor sit amet,献祭精英。Aliquam eget sapien sapien。梅图斯乌纳的库拉比图尔。在hac habitasse Plateum,一句名言。Phasellus eu sem sapien,sed vestabulum velit。Nam purus nibh,lacinia non faucibus et,dolor的pharetra。这是我的心愿。Morbi commodo sodales nisi id sodales。这是一种常见的饮食习惯,是一种健康的饮食习惯,是一种健康的饮食习惯。在马萨马格纳的项目中,对nec、nec、posuere nec lacus进行了广泛的讨论。我的爱人,我的爱人,我的精英。不允许有任何违反欧盟法律的行为。

Lorem ipsum dolor sit amet,献祭精英。Aliquam eget sapien sapien。梅图斯乌纳的库拉比图尔。在hac habitasse Plateum,一句名言。Phasellus eu sem sapien,sed vestabulum velit。Nam purus nibh,lacinia non faucibus et,dolor的pharetra。这是我的心愿。Morbi commodo sodales nisi id sodales。这是一种常见的饮食习惯,是一种健康的饮食习惯,是一种健康的饮食习惯。在马萨马格纳的项目中,对nec、nec、posuere nec lacus进行了广泛的讨论。我的爱人,我的爱人,我的精英。不允许有任何违反欧盟法律的行为。

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h3 class="text-center">
                h3. Lorem ipsum dolor sit amet.
            </h3>
        </div>
    </div>
    <div class="row">
        <div class="col-md-5">
        </div>
        <div class="col-md-2">
            <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" />
        </div>
        <div class="col-md-5">
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <p>
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
        </div>
        <div class="col-md-4">
            <p>
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
        </div>
        <div class="col-md-4">
            <p>
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
        </div>
    </div>
</div>