集中引导列 [英] Centralising Bootstrap Columns

查看：27
本文介绍了集中引导列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在与 Bootstrap 合作创建一个响应式网站，并有三个大小相同的 div，需要在页面上居中.但是，他们更多地关注页面的左侧.

HTML:

 
<div class="team-desktop 容器"><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 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 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>

CSS:

.team-desktop {显示:内联块；保证金:0 自动；}#团队测试{文字对齐:居中；}.team-profile {宽度:350px；文字对齐:居中；显示:块；保证金:0 自动；背景色:#f7f7f7;边框半径:10px；边距右:20px;边距顶部:20px；浮动:无；}

网站截图

我尝试过使用 Bootstraps 'offset' 来居中它们，但是，它使 div 垂直流动；而不是将所有三个放在同一列中.

解决方案

是的，Bootstrap 网格是 12 列.您使用了覆盖 col-sm-4 的 col-md-3.除了自定义样式之外，您不需要应用任何 CSS.您也没有包含 .row 类来将所有列包装在容器内.

查看下面的代码.和代码笔链接.

<div class="team-desktop 容器"><div 类=行"><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 是小用户的角色.在这里添加更多内容，它会很长.</p><p class="团队信息">这是示例用户信息
<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 是小用户的角色.您可以在此处添加任何您喜欢的内容.</p><p class="团队信息">这是示例用户信息

<div class="team-profile col-sm-4"><h3 class="team-name">人 3/h3<img class="team-image img-responsive img-circle" src="http://placehold.it/100x100" alt=""/><p class="team-info-role">Thsi 是小用户的角色，这里也是，它会扩展</p><p class="团队信息">这是示例用户信息

在 http://codepen.io/piyushpatel2005/pen/NpEMq 检查示例 Codepen

I'm working with Bootstrap to create a responsive site and have three divs of equal size that need centering on the page. However, they're focusing more to the left hand-side of the page.

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;
}

Website Screenshot

I have tried using Bootstraps 'offset' which does center them, however, it makes the divs flow vertically; instead of having all three on the same column.

解决方案

Yeah Bootstrap grid is 12 column. You used col-md-3 which overrides col-sm-4. You don't need to apply any CSS except for your custom styles. You also didn't include .row class to wrap all your columns inside container.

Check out the code below. and codepen link.

<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>

Check sample Codepen at http://codepen.io/piyushpatel2005/pen/NpmEMq

这篇关于集中引导列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆