2017-06-20 134 views
0

我的网站使用Themeisle,它使用bootstrap进行布局。但是,如果左右元素的高度不同,则团队布局会错位。请参考下面的链接:网格css未对齐

https://www.crysto.io/index.php/fr/accueil/

Bootply

的Html

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <a href="#team"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/04/Sky.jpg" alt="Sky Guo" title="Sky Guo"> 
        </a> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Sky Guo</h4> 
        <h6 class="category text-muted">Co-Founder</h6> 
        <p class="card-description">Sky possède une vaste connaissance du niveau d'infrastructure concernant le consensus de la chaîne de blocs, les algorithmes de transaction, les algorithmes cryptographiques et les mécanismes de messagerie. Il a mené des recherches approfondies sur les implémentations de les chaînes de blocs actuelles et leur code source. Depuis novembre 2016, il a commencé à développer une nouvelle infrastructure de bloc-bloc viable et évolutive, et à assembler une équipe extraordinaire pour la mettre en œuvre. Sky est aussi un chroniqueur pour 8BTC, le plus important moyen de médias technologique en chaîne de blocs. Sky a poursuivi son baccalauréat en sciences de l'informatique à l'Université Pepperdine et a obtenu un baccalauréat en entrepreneuriat de l'Université Draper.</p> 
       </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/04/Christian.jpg" alt="Christian Mate Jr." title="Christian Mate Jr."> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Christian Mate Jr.</h4> 
        <h6 class="category text-muted">Co-Founder</h6> 
        <p class="card-description">Christian est un passionné de technologie de blockchain expérimenté. Fondant un start-up de bloc-bloc en 2015, il croit que la technologie blockchain servira de base à la prochaine génération d'applications. Avec l'expérience de travailler avec des agences de premier plan dans les secteurs public et privé dans les domaines de la santé, de la gestion des droits numériques, de l'identité autonome et maintenant Crysto, il se concentre sur la capacité de transition et l'accessibilité de l'infrastructure décentralisée des applications pour permettre aux utilisateurs et les développeurs. He et Sky ont également été décernés pour un effort universel d'identité de soins de santé au premier Hackathon sponsorisé par le gouvernement des États-Unis.</p> 
       </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/04/Haochong.jpg" alt="Solomon Zhang" title="Solomon Zhang"> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Solomon Zhang</h4> 
        <h6 class="category text-muted">Co-Founder, Lead Developer</h6> 
        <p class="card-description">Solomon est Ph.D. Diplômé de l'Université des sciences et de la technologie de Chine et chercheur invité à l'Université du Massachusetts, Amherst. Salomon possède une connaissance profonde et expansive dans les domaines de la cryptographie et de la sécurité du réseau. Sa recherche porte sur l'intelligence artificielle, les grandes données, la réplication des machines d'état et les nouveaux protocoles cryptographiques.</p> 
       </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/04/yifu.jpg" alt="Yifu Ren" title="Yifu Ren"> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Yifu Ren</h4> 
        <h6 class="category text-muted">Co-Founder, Technical Designer</h6> 
        <p class="card-description">Yifu est un concepteur technique talentueux et un développeur spécialisé dans la conception de l'interface utilisateur et de l'expérience utilisateur. Il a de l'expérience dans des projets de grande envergure pour les entreprises informatiques multinationales, y compris Microsoft et Ubisoft. Il a servi dans les rôles de gestion de projet, fournissant l'assurance qualité, la planification du développement et la conception de l'expérience utilisateur. Il est compétent dans plusieurs langages de programmation et modèles de conception.</p> 
       </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/04/Anker.jpg" alt="Anker Chen" title="Anker Chen"> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Anker Chen</h4> 
        <h6 class="category text-muted">Developer</h6> 
        <p class="card-description">M. Chen est un ancien développeur chez Amazon avec de nombreuses années d'expérience dans la programmation d'infrastructures de réseau performantes. Il a dirigé le développement de la plate-forme d'analyse et d'acquisition de données d'achats de Amazon et exploite l'expérience pratique avec le calcul scientifique et les grandes solutions de données.</p> 
       </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/05/rsz_yibo-sim-xing-300x300.png" alt="Sim Xing" title="Sim Xing"> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Sim Xing</h4> 
        <h6 class="category text-muted">Developer</h6> 
        <p class="card-description">Sim a étudié l'ingénierie en réseau au collège et a obtenu une maîtrise en informatique de l'Université Carnegie Mellon. Il a travaillé sur la société Internet supérieure de Chine, Tencent, comme l'un de ses développeurs principaux. En tant que développeur à Tencent, il a construit des systèmes de réseau desservant simultanément des centaines de millions d'utilisateurs. Sim a également une solide expérience dans la construction de services réseau hautement exigeants et évolutifs.</p> 
       </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/04/Fanghua.jpg" alt="Fanghua Qiao" title="Fanghua Qiao"> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Fanghua Qiao</h4> 
        <h6 class="category text-muted">Developer</h6> 
        <p class="card-description">Fanghua détient une maîtrise en génie électrique de l'Université de Californie du Sud. Il possède une connaissance approfondie dans protocole TCP/IP, programmation réseau et gestion de la concurrence. Il a de l'expérience à travailler pour les grandes entreprises informatiques, y compris Amazon en tant qu'ingénieur.</p> 
       </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/05/Pu-300x300.jpg" alt="Pu Shi" title="Pu Shi"> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Pu Shi</h4> 
        <h6 class="category text-muted">Developer</h6> 
        <p class="card-description">M. Pu Shi était un entrepreneur en série qui a été cofondateur et CTO de Carloha, une société de commerce électronique d'automobiles d'occasion basée à New York. Avant Carloha, Pu a travaillé comme Senior Software Engineer et Tech-Lead pendant plusieurs années dans des entreprises technologiques, y compris Google et Microsoft. Pu a obtenu son baccalauréat en mathématiques de l'Université Shandong en Chine et une maîtrise en informatique de l'Université Emory aux États-Unis.</p> 
       </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/04/Mike.jpg" alt="Mike Eekhof" title="Mike Eekhof"> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Mike Eekhof</h4> 
        <h6 class="category text-muted">European Affairs Director</h6> 
        <p class="card-description">En tant que directeur des affaires européennes, Mike réside actuellement aux Pays-Bas. Mike, comme le reste de notre équipe, est un entrepreneur passionné des avantages qu'offre la chaîne de blocs. Il a fondé un démarrage de LawTech qui a tiré parti des preuves cryptographiques à base de bloc-blocs pour les signatures électroniques et une piste de vérification immuable. Il collabore activement avec les principales communautés de bloc-blocs basées sur l'UE et coordonne les efforts de collaboration avec des groupes sélectionnés.</p> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 

如何我能得到这个固定的?

+0

看起来不错,以我什么是应该看起来像更改您的代码? – Tik

回答

0

添加<div class="clearfix hidden-xs hidden-sm"></div>每对夫妇的col-md-6

而不是

<div class="row"> 
     <div class="col-md-6"></div> 
     <div class="col-md-6"></div> 
     <div class="col-md-6"></div> 
     <div class="col-md-6"></div> 
     <div class="col-md-6"></div> 
     <div class="col-md-6"></div> 
    </div> 

更换由

<div class="row"> 
    <div class="col-md-6"></div> 
    <div class="col-md-6"></div> 
    <div class="clearfix hidden-xs hidden-sm"></div> 
    <div class="col-md-6"></div> 
    <div class="col-md-6"></div> 
    <div class="clearfix hidden-xs hidden-sm"></div> 
    <div class="col-md-6"></div> 
    <div class="col-md-6"></div> 
    <div class="clearfix hidden-xs hidden-sm"></div> 
</div> 

Bootply

这里商务部:http://getbootstrap.com/css/#helper-classes-clearfix

+0

谢谢。你的答案似乎是第一个,所以我给你最好的答案 – Yangrui

0

目前您有:

<div class="row"> 
    <div class="col-md-6">[content]</div> 
    <div class="col-md-6">[content]</div> 
    <div class="col-md-6">[content]</div> 
... 
</div> 

...这,因为你已经发现,可能会导致对齐问题时,后续内容换到新行,只对接起来反对第一柱而不是左对齐(如果左侧列含量比右高):

enter image description here

为了确保在每一行上的元件具有一致的高度,更新父.row与:

display: flex; 
flex-wrap: wrap; 

...注意到您可能需要的各种供应商前缀。这个现在应该对齐每行显示:

enter image description here

0

我相信你有问题Rencontrez notre équipe那里的人描述列表没有正确对齐。 你应该把每两个元素放在<div class="row"><div class="clearfix hidden-xs hidden-sm"></div>之中你有这个问题的原因就是你所有的内容大小不一。

如下

<div class="container"> 
    <div class="row"> 
     <div class="col-md-8 col-md-offset-2 text-center"> 
      <h2 class="title">Rencontrez notre équipe</h2> 
      <h5 class="description">Crysto est composé de technologues expérimentés, de visionnaires et d'experts possédant de vastes antécédents en cryptographie, réseaux décentralisés et architecture logicielle. Notre équipe de développement augmente chaque jour et nous prévoyons de réunir bientôt des membres à plein temps.</h5> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="card card-profile card-plain"> 
       <div class="col-md-5"> 
        <div class="card-image"> 
         < a href="#team"> 
         <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/04/Sky.jpg" alt="Sky Guo" title="Sky Guo"> 
        </a> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Sky Guo</h4> 
        <h6 class="category text-muted">Co-Founder</h6> 
        <p class="card-description">Sky possède une vaste connaissance du niveau d'infrastructure concernant le consensus de la chaîne de blocs, les algorithmes de transaction, les algorithmes cryptographiques et les mécanismes de messagerie. Il a mené des recherches approfondies sur les implémentations de les chaînes de blocs actuelles et leur code source. Depuis novembre 2016, il a commencé à développer une nouvelle infrastructure de bloc-bloc viable et évolutive, et à assembler une équipe extraordinaire pour la mettre en œuvre. Sky est aussi un chroniqueur pour 8BTC, le plus important moyen de médias technologique en chaîne de blocs. Sky a poursuivi son baccalauréat en sciences de l'informatique à l'Université Pepperdine et a obtenu un baccalauréat en entrepreneuriat de l'Université Draper.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/04/Christian.jpg" alt="Christian Mate Jr." title="Christian Mate Jr."> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Christian Mate Jr.</h4> 
        <h6 class="category text-muted">Co-Founder</h6> 
        <p class="card-description">Christian est un passionné de technologie de blockchain expérimenté. Fondant un start-up de bloc-bloc en 2015, il croit que la technologie blockchain servira de base à la prochaine génération d'applications. Avec l'expérience de travailler avec des agences de premier plan dans les secteurs public et privé dans les domaines de la santé, de la gestion des droits numériques, de l'identité autonome et maintenant Crysto, il se concentre sur la capacité de transition et l'accessibilité de l'infrastructure décentralisée des applications pour permettre aux utilisateurs et les développeurs. He et Sky ont également été décernés pour un effort universel d'identité de soins de santé au premier Hackathon sponsorisé par le gouvernement des États-Unis.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/04/Haochong.jpg" alt="Solomon Zhang" title="Solomon Zhang"> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Solomon Zhang</h4> 
        <h6 class="category text-muted">Co-Founder, Lead Developer</h6> 
        <p class="card-description">Solomon est Ph.D. Diplômé de l'Université des sciences et de la technologie de Chine et chercheur invité à l'Université du Massachusetts, Amherst. Salomon possède une connaissance profonde et expansive dans les domaines de la cryptographie et de la sécurité du réseau. Sa recherche porte sur l'intelligence artificielle, les grandes données, la réplication des machines d'état et les nouveaux protocoles cryptographiques.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/04/yifu.jpg" alt="Yifu Ren" title="Yifu Ren"> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Yifu Ren</h4> 
        <h6 class="category text-muted">Co-Founder, Technical Designer</h6> 
        <p class="card-description">Yifu est un concepteur technique talentueux et un développeur spécialisé dans la conception de l'interface utilisateur et de l'expérience utilisateur. Il a de l'expérience dans des projets de grande envergure pour les entreprises informatiques multinationales, y compris Microsoft et Ubisoft. Il a servi dans les rôles de gestion de projet, fournissant l'assurance qualité, la planification du développement et la conception de l'expérience utilisateur. Il est compétent dans plusieurs langages de programmation et modèles de conception.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/04/Anker.jpg" alt="Anker Chen" title="Anker Chen"> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Anker Chen</h4> 
        <h6 class="category text-muted">Developer</h6> 
        <p class="card-description">M. Chen est un ancien développeur chez Amazon avec de nombreuses années d'expérience dans la programmation d'infrastructures de réseau performantes. Il a dirigé le développement de la plate-forme d'analyse et d'acquisition de données d'achats de Amazon et exploite l'expérience pratique avec le calcul scientifique et les grandes solutions de données.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/05/rsz_yibo-sim-xing-300x300.png" alt="Sim Xing" title="Sim Xing"> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Sim Xing</h4> 
        <h6 class="category text-muted">Developer</h6> 
        <p class="card-description">Sim a étudié l'ingénierie en réseau au collège et a obtenu une maîtrise en informatique de l'Université Carnegie Mellon. Il a travaillé sur la société Internet supérieure de Chine, Tencent, comme l'un de ses développeurs principaux. En tant que développeur à Tencent, il a construit des systèmes de réseau desservant simultanément des centaines de millions d'utilisateurs. Sim a également une solide expérience dans la construction de services réseau hautement exigeants et évolutifs.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/04/Fanghua.jpg" alt="Fanghua Qiao" title="Fanghua Qiao"> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Fanghua Qiao</h4> 
        <h6 class="category text-muted">Developer</h6> 
        <p class="card-description">Fanghua détient une maîtrise en génie électrique de l'Université de Californie du Sud. Il possède une connaissance approfondie dans protocole TCP/IP, programmation réseau et gestion de la concurrence. Il a de l'expérience à travailler pour les grandes entreprises informatiques, y compris Amazon en tant qu'ingénieur.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/05/Pu-300x300.jpg" alt="Pu Shi" title="Pu Shi"> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Pu Shi</h4> 
        <h6 class="category text-muted">Developer</h6> 
        <p class="card-description">M. Pu Shi était un entrepreneur en série qui a été cofondateur et CTO de Carloha, une société de commerce électronique d'automobiles d'occasion basée à New York. Avant Carloha, Pu a travaillé comme Senior Software Engineer et Tech-Lead pendant plusieurs années dans des entreprises technologiques, y compris Google et Microsoft. Pu a obtenu son baccalauréat en mathématiques de l'Université Shandong en Chine et une maîtrise en informatique de l'Université Emory aux États-Unis.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-6"> 
     <div class="card card-profile card-plain"> 
      <div class="col-md-5"> 
       <div class="card-image"> 
        <img class="img" src="https://www.crysto.io/wp-content/uploads/2017/04/Mike.jpg" alt="Mike Eekhof" title="Mike Eekhof"> 
       </div> 
      </div> 
      <div class="col-md-7"> 
       <div class="content"> 
        <h4 class="card-title">Mike Eekhof</h4> 
        <h6 class="category text-muted">European Affairs Director</h6> 
        <p class="card-description">En tant que directeur des affaires européennes, Mike réside actuellement aux Pays-Bas. Mike, comme le reste de notre équipe, est un entrepreneur passionné des avantages qu'offre la chaîne de blocs. Il a fondé un démarrage de LawTech qui a tiré parti des preuves cryptographiques à base de bloc-blocs pour les signatures électroniques et une piste de vérification immuable. Il collabore activement avec les principales communautés de bloc-blocs basées sur l'UE et coordonne les efforts de collaboration avec des groupes sélectionnés.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</div>