彼此移位

时间:2019-02-22 04:31:06

标签: html css

我在引导程序中有一个4 div块。我需要将它们彼此之间更紧密地移动,但是我不能这样做: 这是CSS:

.cnt {
  height: 1067px;
  padding:20px;
  margin-top:20px;
  margin-bottom:10px;
  background: rgba(255, 255, 255, .5);
  overflow:hidden;
  box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
}

@media only screen and (min-width : 480px) {
  .cnt {
    height: auto;
  }
}

@media only screen and (min-width : 768px) {
  .cnt {
    width: 471px;
    height: 452px;
    padding: 30px;
  }
}

@media all and (max-width: 1170px) {
    .cnt {
        height: 380px;
    }
}  

这是HTML:

<div class="col-md-6  col-xs-12">
      <div class="cnt"><img class="feature-icon" src="images/contract.svg"><br>
        <br><br><b>Strategic<br>Planning</b><br><br>
        Strategic Planning projects help our clients to make 
        decisions and take actions that match their company’s 
        skills.</div>
    </div>
    <div class="col-md-6 col-xs-12">
      <div class="cnt"><img class="feature-icon" src="images/analytics.svg"><br>
      <br><br><b>Market research</b><br><b>Partner Search</b><br><br>
        Our aim is to build a long-term and positive relationship 
        with our clients and to contribute to business owners’ 
        confidence. </div>
    </div>

    <div class="col-md-6  col-xs-12">
      <div class="cnt"><img class="feature-icon" src="images/weight-balance.svg"><br>   
        <br><br><b>Coaching</b>
        <br><br><br><br>Coaching focuses on future possibilities, not past 
        mistakes… Coaching thinks of the people in terms
        of their potential, not their performance.</div>
    </div>
    <div class="col-md-6 col-xs-12">
      <div class="cnt"><img class="feature-icon" src="images/idea.svg"><br>
      <br><br><b>Project</b><br><b>Management</b><br>
       <br>An engagement with an objective, start and end date, 
        aimed to create a product or service may be considered 
        a project.</div>
    </div>

我尝试对每个块使用float:leftdisplay: inline-block,但id并没有帮助我。我该怎么解决?

1 个答案:

答案 0 :(得分:0)

我认为您需要将类添加到<div class="col-md-6 col-xs-12">元素中,并添加自定义CSS,如下所示:

.inline {  display:inline-block; }