Question

我想在中心显示2个div。我有像这样显示的div。我只想在中心的第二排div。 req design like this

output
----     -------       -------
         -------       -------

desired output
-----     -------       -------
    -------       -------

码

<div class="row">
   <div class="features">
      <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
         <div class="feature-wrap">
            <a href="one.aspx">   <i class="fa fa-pencil" ></i></a>  
            <h2>One</h2>
            <h3>one</h3>
         </div>
      </div><!--/.col-md-4-->  
      <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
         <div class="feature-wrap">
            <a href="two.aspx">    <i class="fa fa-line-chart"></i></a>
            <h2>Two</h2>
            <h3>Two</h3>
         </div>
      </div><!--/.col-md-4-->        
      <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
         <div class="feature-wrap">
            <a href="Three.aspx"> <i class="fa fa-database"></i></a> 
            <h2>three</h2>
            <h2>Three</h2>
            <h3>Three</h3>
         </div>
      </div><!--/.col-md-4-->
      <div>
         <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms" align="">
            <div class="feature-wrap"> 
               <a href="Four.aspx">  <i class="fa fa-book" align=""></i></a>
               <h2>Four</h2>
               <h3>Coming Soon...</h3>
            </div>
         </div><!--/.col-md-4-->
         <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
            <div class="feature-wrap">
               <a href="Five.aspx"> <i class="fa fa-mobile"></i></a>
               <h2>Five</h2>
               <h3>Coming Soon...</h3>
            </div>
         </div><!--/.col-md-4-->
      </div>
  </div><!--/.services-->
</div>
</div><!--/.services-->
</div>

jsfiddle代码 https://jsfiddle.net/tccu9ue8/4/

Answer 1

正如@sahil Dhir建议的那样，您可以使用布局的偏移值，如

Col-md-offset-[number of column offsets]

在你的情况下，给第二行的第一个元素提供2的列偏移应该是魔术。

这是一个工作小提琴。 https://jsfiddle.net/tccu9ue8/6/

如果您需要更多信息请告诉我干杯！

Answer 2

这是实现您要求的一种方式：
[基本 CSS （填充和边距）可以应用更好的结果]

<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

</head>
<body class="container">
<div class="row">
    <div class="col-md-4 col-xs-4 col-lg-4 col-sm-4" align="center">
    <button class="btn btn-primary">1ST</button>
    </div>
      <div class="col-md-4 col-xs-4 col-lg-4 col-sm-4" align="center">
    <button class="btn btn-primary">2nd</button>
    </div>
      <div class="col-md-4 col-xs-4 col-lg-4 col-sm-4" align="center">
    <button class="btn btn-primary">3rd</button>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-6 col-xs-6 col-lg-6 col-sm-6" align="center">
    <button class="btn btn-primary">4th</button>
    </div>
      <div class="col-md-6 col-xs-6 col-lg-6 col-sm-6" align="center">
    <button class="btn btn-primary">5th</button>
    </div>
</div>
</body>
</html>

希望这有助于实现您的目的。

Answer 3

您需要使用display:inline-block而非float: left作为引导列https://jsfiddle.net/7mbs9cjj/

＆＃13;

.block {
  height: 200px;
  background: #333;
}

.h-center .col-sm-4 {
  margin-bottom: 20px;
  float: none;
  display: inline-block;
  vertical-align: top;
  margin-right: -4px;
}

.row {
  text-align: center;
  display: block;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row h-center">
  <div class="col-sm-4">
    <div class="block"></div>
  </div>
  <div class="col-sm-4">
    <div class="block"></div>
  </div>
  <div class="col-sm-4">
    <div class="block"></div>
  </div>
  <div class="col-sm-4">
    <div class="block"></div>
  </div>
  <div class="col-sm-4">
    <div class="block"></div>
  </div>
</div>

＆＃13;

Answer 4

使用flexbox实现此设计的简单方法。

您可以从MDN here找到一份好的指南。

对于您的实现，您不必使用bootstrap。

只需换行两行，创建一行全宽，另一行为半宽，并使用flexbox属性根据需要对齐它们。

＆＃13;

.line {
  display: flex;
  justify-content: space-between;
}

.line--second {
  width: 50%;
  margin: 0 auto;
  justify-content: space-between;
}

＆＃13;

<div class="wrapper">

<div class="line line--first">
 <div class="item">One </div>
  <div class="item"> Two </div>
  <div class="item"> Three </div>
</div>
<div class="line line--second">
  <div class="item">Four </div>
    <div class="item">Five </div>
</div>

</div>

＆＃13;

希望这就是你的意思。

如何在bootstrap中显示行中心的2个div

4 个答案: