Question

我正在阅读关于这个主题的this主题。但是，由于这是我创建一个仅专注于bootstrap的网站的第一天，我仍然在学习基础知识，所以我提前为任何错误道歉。

我试图将所有内容一个接一个地集中在一起。但是，我的图像看起来并不居中。如何使其居中并与标题和三个框对齐？

我的完整代码如下。

{'R4': 10, 'R1': 0, 'R2': 5, 'R3': 5} {'R4': ['R2', 'R3'], 'R2': ['R1'], 'R3': ['R1']}

Traceback (most recent call last):
File "next-hop-resolver.py", line 194, in <module>
print shortestPath(graph_2,'R1','R4')
File "next-hop-resolver.py", line 172, in shortestPath
end = P[end]
TypeError: unhashable type: 'list'

.body {
  margin: 0;
  padding: 0;
}

.header-title {
  text-align: center;
  color: black;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
}

.intro-text {
  text-align: center;
  color: black;
  font-family: 'Roboto', sans-serif;
}

.p {
  text-align: center;
  color: black;
  font-family: 'Roboto', sans-serif;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 250px;
  width: 250px;
  border-radius: 25px;
  background: #4D5061;
}

Answer 1

只能在＆＃39;容器＆＃39;中更改第58行的课程到＆＃39; row＆＃39;，班级＆＃39;容器＆＃39;左右添加填充。

第58行

    <div class="container">

更改为：

    <div class="row">

Answer 2

您的容器应包含您的所有网页，发布一个。其次，您已经调整了影响图像的图像块的核心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>

如何使用bootstrap中心我的内容？

2 个答案: