Question

我想在两列之间添加10px的间距，而我尝试过的任何操作都使列开始了新的一行。

这就是我需要的：

我希望两列之间的间隔为10px，但是到目前为止，我所做的任何事情都帮不了我什么，它只是将一个col-xs-6推到另一行上。

这是我的代码：

.row {
  margin-left: auto!important;
  margin-right: auto!important;
}

.col-xs-6,
#Office365XS,
#StreamXS,
#PowerBIXS img {
  margin-bottom: 5px!important;
}

#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
  margin-top: 15px!important;
  margin-bottom: 5px!important;
}

.visible-xs {
  padding: 0px!important;
}

hr {
  margin-top: 10px!important;
  margin-bottom: 0px!important;
  margin-right: 15px!important;
  margin-left: 15px!important;
}

#Q3,
#Q4 {
  margin-top: 20px!important;
}

#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
  background-color: #F2F2F2;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  padding: 5px;
}

#Office365XS,
#OneDriveXS,
#TeamsXS,
#WordXS,
#StreamXS,
#DelveXS,
#FormsXS,
#ExcelXS,
#Outlook_OnlineXS,
#PlannerXS,
#PowerPointXS,
#SharePointXS,
#YammerXS,
#PowerBIXS {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F2F2;
  padding-top: 20px;
  font-weight: bold;
}

#appSpacing {
  margin-top: 10px!important;
  margin-bottom: 10px!important
}

.num {
  position: absolute;
  top: 5px;
  left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-12" id="CollabXS">
          <div>COLLABORATION</div>
        </div>
      </div>
      <div class="col-xs-6" id="YammerXS">
        <div id="appSpacing">
          <a href="/TrainingResourceCenter/O365Training/Pages/Yammer.aspx" target="_blank"><img src="/TrainingResourceCenter/O365Training/PublishingImages/ftHCqeb.png" height="50px" width="50px" /></a>
          <p>Yammer</p>
          <span class="num">5</span>
        </div>
      </div>
      <div class="col-xs-6" id="TeamsXS">
        <div id="appSpacing">
          <a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx" target="_blank"><img src="/TrainingResourceCenter/O365Training/PublishingImages/teams-tile.png" height="50px" width="50px" /></a>
          <p>Teams</p>
          <span class="num">6</span>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

如果您只想在各列之间留一个空格，为什么不尝试使用引导类justify-content-between？

Answer 2

尝试使用col-md-offset-2类。您可以找到问题here

的建议答案

尝试以下操作：

 <div class="col-xs-6" style=padding-left:5px >
     <div class="col-xs-12" id="YammerXS">
    <div id="appSpacing">
      <a href="/TrainingResourceCenter/O365Training/Pages/Yammer.aspx" target="_blank"><img src="/TrainingResourceCenter/O365Training/PublishingImages/ftHCqeb.png" height="50px" width="50px" /></a>
      <p>Yammer</p>
      <span class="num">5</span>
    </div>
    </div>
  </div>
  <div class="col-xs-6" style=padding-right:5px>
   <div class="col-xs-12" id="TeamsXS">
    <div id="appSpacing">
      <a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx" target="_blank"><img src="/TrainingResourceCenter/O365Training/PublishingImages/teams-tile.png" height="50px" width="50px" /></a>
      <p>Teams</p>
      <span class="num">6</span>
    </div>
    </div>
  </div>

Answer 3

我简化了HTML和CSS，仅显示了这两列。使用边框。

.col-xs-6 {
    }
    #YammerXS {
      border-right: 5px solid #ffffff;
      background-color: yellow;
    }
    #TeamsXS {
      border-left: 5px solid #ffffff;
      background-color: pink;
    }

<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">
      </head>
      <body>
        <div class="row container">
          <div class="col-xs-6" id="YammerXS">
            <p>Yammer</p>
          </div>
          <div class="col-xs-6" id="TeamsXS">
            <p>Teams</p>
          </div>
        </div>
      </body>
    </html>

Answer 4

看看这是否对您有帮助，我为您的列添加了一个父div，并为第一个项目添加了边距。

.row {
  margin-left: auto!important;
  margin-right: auto!important;
}

.col-xs-6,
#Office365XS,
#StreamXS,
#PowerBIXS img {
  margin-bottom: 5px!important;
}

#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
  margin-top: 15px!important;
  margin-bottom: 5px!important;
}

.visible-xs {
  padding: 0px!important;
}

hr {
  margin-top: 10px!important;
  margin-bottom: 0px!important;
  margin-right: 15px!important;
  margin-left: 15px!important;
}

#Q3,
#Q4 {
  margin-top: 20px!important;
}

#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
  background-color: #F2F2F2;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  padding: 5px;
}

#Office365XS,
#OneDriveXS,
#TeamsXS,
#WordXS,
#StreamXS,
#DelveXS,
#FormsXS,
#ExcelXS,
#Outlook_OnlineXS,
#PlannerXS,
#PowerPointXS,
#SharePointXS,
#YammerXS,
#PowerBIXS {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F2F2;
  padding-top: 20px;
  font-weight: bold;
}

#appSpacing {
  margin-top: 10px!important;
  margin-bottom: 10px!important
}

.num {
  position: absolute;
  top: 5px;
  left: 10px;
}

.parent {
  display: flex;
  justify-content: space-between;
}
.child {
 background: #148342;
 }
.child:first-child {
  margin-right: 10px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-12" id="CollabXS">
          <div>COLLABORATION</div>
        </div>
      </div>
     <div class="parent">
      <div class="col-xs-6 child" id="YammerXS">
        <div id="appSpacing">
          <a href="/TrainingResourceCenter/O365Training/Pages/Yammer.aspx" target="_blank"></a>
          <p>Yammer</p>
          <span class="num">5</span>
        </div>
      </div>
      <div class="col-xs-6 child" id="TeamsXS">
        <div id="appSpacing">
          <a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx" target="_blank"></a>
          <p>Teams</p>
          <span class="num">6</span>
        </div>
      </div>
     </div>
    </div>
  </div>
</body>

</html>

父行中两列之间的间距

4 个答案: