我正在使用Bootstrap来创建一个响应式网站，并且有三个相同大小的div需要以页面为中心。但是，他们会更多地关注页面的左侧。
HTML：
<div id="team-test">
<div class="team-desktop container">
<div class="team-profile col-sm-4 col-md-3">
<h3 class="team-name">Person 1</h3>
<img class="team-image" src="assets/img/team-2.png" alt=""/>
<p class="team-info-role"></p>
<p class="team-info"></p>
</div>
<div class="team-profile col-sm-4 col-md-3">
<h3 class="team-name"></h3>
<img class="team-image" src="assets/img/team-1.png" alt=""/>
<p class="team-info-role"></p>
<p class="team-info"></p>
</div>
<div class="team-profile col-sm-4 col-md-3">
<h3 class="team-name"></h3>
<img class="team-image" src="assets/img/team-3.png" alt=""/>
<p class="team-info-role"></p>
<p class="team-info"></p>
</div>
</div>
</div>
CSS：
.team-desktop {
display:inline-block;
margin:0 auto;
}
#team-test {
text-align:center;
}
.team-profile {
width:350px;
text-align:center;
display:block;
margin:0 auto;
background-color:#f7f7f7;
border-radius:10px;
margin-right:20px;
margin-top: 20px;
float:none;
}
我尝试过使用Bootstraps＆＃39; offset＆＃39;然而，它使它们居中，它使div垂直流动;而不是将所有三个放在同一列上。
答案 0 :(得分：1)
如果您正在使用（或者愿意升级到）Bootstrap 4，它可以通过使用＆＃34; col＆＃34;来自动调整列的大小。没有指定大小的类。
您添加到行中的列数将在网格中分配相同的分布。
https://v4-alpha.getbootstrap.com/layout/grid/#auto-layout-columns
答案 1 :(得分：1)
是的Bootstrap网格是12列。你使用col-md-3来覆盖col-sm-4。除了自定义样式之外，您不需要应用任何CSS。您也没有包含.row类来将所有列包装在容器中。
查看下面的代码。和codepen链接。
<div id="team-test">
<div class="team-desktop container">
<div clas="row">
<div class="team-profile col-sm-4">
<h3 class="team-name">Person 1</h3>
<img class="team-image img-responsive img-circle center-block" src="http://placehold.it/100x100" alt=""/>
<p class="team-info-role">Thsi is the role for smaple user. Add more content here and it will be long.</p>
<p class="team-info"> This is sample user info</p>
</div>
<div class="team-profile col-sm-4">
<h3 class="team-name">Person 2</h3>
<img class="team-image img-circle" src="http://placehold.it/100x100" alt=""/>
<p class="team-info-role">Thsi is the role for smaple user. You can add whatever you like here.</p>
<p class="team-info"> This is sample user info</p>
</div>
<div class="team-profile col-sm-4">
<h3 class="team-name"> Person 3</h3>
<img class="team-image img-responsive img-circle" src="http://placehold.it/100x100" alt=""/>
<p class="team-info-role">Thsi is the role for smaple user and here also and it will expand</p>
<p class="team-info"> This is sample user info</p>
</div>
</div>
</div>
</div>
答案 2 :(得分：0)
如您在问题下方的评论和此屏幕截图https://gyazo.com/1bbbe2ac98b5130a8fee251e771e8f69中所示，我相信您可能想在 .container 中添加 .row ，内联的第四个区块（仅供参考， .row 具有负边距，请尝试检查它。）
我也不明白为什么你想拥有那些自定义CSS（覆盖col元素的宽度，使容器内联块...）？这些肯定会破坏Bootstrap网格： - ）
另外，如果您希望它是3块填满整个空间的块，请将 .col-md-3 更改为 .col-md-4 。或者，如果你想让那些小的列，我建议减少 .container （或 .team-desktop ）的大小，使其等于这些列的总和。小马。
所以它应该是这样的
<div id="team-test">
<div class="team-desktop container">
<div class="row">
<div class="team-profile col-sm-4 col-md-4">
<h3 class="team-name">Person 1</h3>
<img class="team-image" src="assets/img/team-2.png" alt=""/>
<p class="team-info-role"></p>
<p class="team-info"></p>
</div>
<div class="team-profile col-sm-4 col-md-4">
<h3 class="team-name"></h3>
<img class="team-image" src="assets/img/team-1.png" alt=""/>
<p class="team-info-role"></p>
<p class="team-info"></p>
</div>
<div class="team-profile col-sm-4 col-md-4">
<h3 class="team-name"></h3>
<img class="team-image" src="assets/img/team-3.png" alt=""/>
<p class="team-info-role"></p>
<p class="team-info"></p>
</div>
</div>
</div>
</div>
答案 3 :(得分：0)
我建议使用网格系统而不是通过覆盖大部分内容来对抗它，就像你使用Chrome 57.0.2987 (Windows 10 0.0.0) DataService should authorize the app FAILED
Expected undefined to equal '1234-asdf-4321', [object Promise].
at SafeSubscriber._next (webpack:///src/service/data/data.service.spec.ts:122:28 <- src/test.ts:85196:31) [ProxyZone]
at SafeSubscriber.__tryOrSetError (webpack:///~/rxjs/Subscriber.js:243:0 <- src/test.ts:7378:16) [ProxyZone]
at SafeSubscriber.next (webpack:///~/rxjs/Subscriber.js:185:0 <- src/test.ts:7320:27) [ProxyZone]
at Subscriber._next (webpack:///~/rxjs/Subscriber.js:125:0 <- src/test.ts:7260:26) [ProxyZone]
at Subscriber.next (webpack:///~/rxjs/Subscriber.js:89:0 <- src/test.ts:7224:18) [ProxyZone]
at CatchSubscriber.Subscriber._next (webpack:///~/rxjs/Subscriber.js:125:0 <- src/test.ts:7260:26) [ProxyZone]
at CatchSubscriber.Subscriber.next (webpack:///~/rxjs/Subscriber.js:89:0 <- src/test.ts:7224:18) [ProxyZone]
类一样。如果您意识到这些影响，请继续。
正如其他人已经注意到3列宽3列而不是12列。这不是问题，除非你想使用偏移类来居中。偏移列类有整列值，我们知道3/2 = 1.5。因此，您需要创建一个自定义偏移类来居中。
下面是使用Bootstrap Grid System的一般演示，以及如何使用自定义偏移列类将一组奇数列对中。
*请务必点击全屏，以便不会堆叠列。
.team-profile@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
/* Following three selectors illustration purposes. */
.row:nth-child( 1 ) {
background-color: gold;
}
.row:nth-child( 2 ) {
background-color: skyblue;
}
.item {
background-color: rgba( 252, 252, 252, 0.7 );
}
/* Custom offset class */
@media (min-width: 768px) {
.col-sm-offset-1-5 {
margin-left: 12.49999%;
}
}
最终，列会堆叠，因为通常需要在较小视口的响应式设计中发生这种情况。