Question

我有两个并排坐着的div，但是并没有居中于div的内部，而是留在它的左边。我试图使其响应和居中，因为屏幕尺寸正在调整，这是我的代码。

Event

我的Css

  <div class="connectdiv">
   <div class="row">  
    <div class="col-xs-6 text-center" "col-sm-6" >
     <h2 id="connect"><u>Connect</u></h2> 
       <a target="_blank" href="https://www.instagram.com/balt_jitsu19/"><i class="fa fa-instagram fa-lg"></i></a>
       <a href="mailto:baltznunez@gmail.com"><i class="fa fa-envelope fa-lg"></i></a>
       <a target="_blank" href="https://www.freecodecamp.com/armbar1"><i class="fa fa-free-code-camp fa-lg"></i></a>
       <a target="_blank" href="http://github.com/baltz1"><i class="fa fa-github fa-lg"></i></a>
    </div>  



  <div class="col-xs-6 text-center" "col-sm-6">
   <h2 id="connect"><u>Made With</u></h2>
     <i class="fa fa-html5 fa-2x"></i>
     <i class="fa fa-css3 fa-2x"></i>
     <a href="https://icons8.com"><img src="https://png.icons8.com/icons8/ios7/32/" title="Icons8" width="32" height="32"></a>
     <img src="https://png.icons8.com/gimp/ios7/25/" title="GIMP" width="25" height="25">
   </div>  
  </div>
 </div>

如果它有助于我在codepen上https://codepen.io/balt1/pen/VbYweZ?editors=0100

Answer 1

尝试这个...它会起作用：

 <div class="connectdiv">
 <div class="row">  
 <div class="col-xs-6 text-center col-sm-6" >
 <h2 id="connect"><u>Connect</u></h2> 
   <a target="_blank" href="https://www.instagram.com/balt_jitsu19/"><i class="fa fa-instagram fa-lg"></i></a>
   <a href="mailto:baltznunez@gmail.com"><i class="fa fa-envelope fa-lg"></i></a>
   <a target="_blank" href="https://www.freecodecamp.com/armbar1"><i class="fa fa-free-code-camp fa-lg"></i></a>
   <a target="_blank" href="http://github.com/baltz1"><i class="fa fa-github fa-lg"></i></a>
</div>  



 <div class="col-xs-6 text-center col-sm-6">
 <h2 id="connect"><u>Made With</u></h2>
 <i class="fa fa-html5 fa-2x"></i>
 <i class="fa fa-css3 fa-2x"></i>
   <a href="https://icons8.com"><img src="https://png.icons8.com/icons8/ios7/32/" title="Icons8" width="32" height="32"></a>
      <img src="https://png.icons8.com/gimp/ios7/25/" title="GIMP" width="25" height="25">
 </div>  
 </div>

Answer 2

您尚未正确应用col-sm-6课程。目前它是一个引用的字符串，岌岌可危地应用于DIV。

更改

class="col-xs-6 text-center" "col-sm-6"

到

class="col-xs-6 col-sm-6 text-center

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');

<div class="connectdiv">

  <div class="row">
    <div class="col-xs-6 col-sm-6 text-center">
    
      <h2 id="connect"><u>Connect</u></h2>
      <a target="_blank" href="https://www.instagram.com/balt_jitsu19/"><i class="fa fa-instagram fa-lg"></i></a>
      <a href="mailto:baltznunez@gmail.com"><i class="fa fa-envelope fa-lg"></i></a>
      <a target="_blank" href="https://www.freecodecamp.com/armbar1"><i class="fa fa-free-code-camp fa-lg"></i></a>
      <a target="_blank" href="http://github.com/baltz1"><i class="fa fa-github fa-lg"></i></a>
      
    </div>
    
    <div class="col-xs-6 col-sm-6 text-center">
    
      <h2 id="connect"><u>Made With</u></h2>
      <i class="fa fa-html5 fa-2x"></i>
      <i class="fa fa-css3 fa-2x"></i>
      <a href="https://icons8.com"><img src="https://png.icons8.com/icons8/ios7/32/" title="Icons8" width="32" height="32"></a>
      <img src="https://png.icons8.com/gimp/ios7/25/" title="GIMP" width="25" height="25">
      
    </div>
  </div>
</div>

Answer 3

text-center之后，div标签中的引号太多了。将其更改为：

<div class="col-xs-6 text-center col-sm-6" >

Answer 4

你把其中一些“太多了” 尝试

<div class="col-xs-6 text-center col-sm-6">

而不是

<div class="col-xs-6 text-center" "col-sm-6">

Answer 5

关于额外报价已写入（class="col-xs-6 text-center" "col-sm-6"）
但还有一点，Bootstrap4没有col-xs-*课程，而是col-*课程，用于额外的小屏幕！
你需要写<div class="col-6 text-center"> class col-sm-6没什么变化，因为Bootstrap移动第一！ Bootstrap4 docs

并排div使用bootstrap 4

5 个答案: