Интервал между двумя столбцами в родительской строке - PullRequest
Новая
       7

Интервал между двумя столбцами в родительской строке

0 голосов
/ 26 июня 2018

Я хочу добавить интервал 10px между двумя столбцами, и все, что я пробовал, заставило столбцы начать новую строку.

Вот что мне нужно:
enter image description here

Я бы хотел, чтобы между двумя столбцами было 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>

Ответы [ 4 ]

0 голосов
/ 26 июня 2018

посмотрите, поможет ли это вам, я добавил родительский 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>
0 голосов
/ 26 июня 2018

Попробуйте использовать класс col-md-offset-2. Вы можете найти предлагаемые ответы на ваш вопрос здесь

Попробуйте следующее: 

 <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>
0 голосов
/ 26 июня 2018

Я упростил 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>
0 голосов
/ 26 июня 2018

Если вам нужен пробел между столбцами, почему бы вам не попробовать класс начальной загрузки justify-content-between?

...