Question

您好。如何在Bootstrap中居中这3个块模块？看看右边的空间有多大？代码修复仅适用于桌面和笔记本电脑视图，因为它将在移动视图中堆叠。

我尝试过在线文章中发现的不同课程。什么都行不通。

body {
    background: none;
}

#features {
    margin-top:20px;
}
.feature, .feature i, .feature h3, .feature .title_border {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;    
}
.feature {
    background:#FFFFFF;
    text-align:center;
    padding:20px;
    border: solid 1px #cccccc;
}
.feature p {
    margin-top:20px;   
    margin-bottom:30px;   
    font-size: 16px;
}

.feature i{
    font-size:80px;
    color:#FFFFFF;
    background:#0088CE;
    padding:30px;
    border-radius:50%;
    border: solid 3px #0088CE;
}
.feature h3 {
    color:#62BB47;  
}
.feature:hover {
    background:#F5F5F5;
    -webkit-transform: translate(0,3em);
    -moz-transform: translate(0,3em);
    -o-transform: translate(0,3em);
    -ms-transform: translate(0,3em);
    transform: translate(0,3em);    
}
.feature:hover i{
    color: #62BB47;
    border-color:#0088CE;
    background:#FFFFFF;
}
.feature:hover .title_border {
    background-color:#1E825F;
    width:50%;
}
.feature .title_border {
    width: 0%;
    height: 3px;
    color: #0088CE;
    background:#0088CE;
    margin: 0 auto;
    margin-top: 12px;
    margin-bottom: 8px;
}

   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
   <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
   
   
   <div class="container" id="features">
         
		    <div class="col-md-3 feature">
    	        <i class="glyphicon glyphicon-list-alt"></i>
                <h3>Lorem ipsum dolor sit amet</h3>
                <div class="title_border"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quam urna, finibus quis mauris a, finibus interdum diam. Maecenas ultrices lacus at lobortis auctor.</p>
		    </div>
            <div class="col-md-3 feature">
                <i class="glyphicon glyphicon-file"></i>
                <h3>Lorem ipsum dolor sit amet</h3>
                <div class="title_border"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quam urna, finibus quis mauris a, finibus interdum diam. Maecenas ultrices lacus at lobortis auctor.</p>
		    </div>
    
            <div class="col-md-3 feature">
                <i class="glyphicon glyphicon-briefcase"></i>
                <h3>Lorem ipsum dolor sit amet</h3>
                <div class="title_border"></div>
                <p>Download the group enrollment forms. Select each form based on the State on the map chart.</p>
    	    </div>	    
</div>

Answer 1

您可以通过添加以下css实际将它们对齐到中心。

@import 'bourbon';
@import 'grid-settings';
@import 'neat';

Answer 2

Bootstrap的网格适用于12列系统。如果你想要居中，但保留col-md-3大小，你需要做一个偏移（但仍然没有均匀地解决），即给第一个特征col-md-offset-1。否则，将它们全部切换到col-md-4，它会将它们适当地分开。

Answer 3

因为它是12列系统给col-md-4然后它完美地工作。检查这个

np.max(np.where(np.max(img_binary,axis=1)==255)

因为它是12列系统给col-md-4然后它完美地工作。检查这个

echo Using CLASSPATH:       "%CLASSPATH%"

如何在计算机屏幕视图中居中3个Bootstrap块模块？

3 个答案: