2017-06-20 19 views
0

私のウェブサイトは、レイアウトのためのブートストラップ使用Themeisleを、使用しています。しかし、左右の要素の高さが異なると、チームのレイアウトがずれてしまいます。グリッド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="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

によって置き換え代わり

<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> 

col-md-6

のそれぞれのカップルの後<div class="clearfix hidden-xs hidden-sm"></div>を追加します。 DOC:現在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

各行の要素を確保するためには、親を更新し、一貫性の高さを有していますあなたが必要とする可能性のある様々なベンダーの接頭辞に注意してください。これは、今揃え各行に表示される必要があります。

enter image description here

0

私はあなたが記述を持つ人々のリストが適切に整列されていないRencontrez notre équipeに問題があると考えています。 あなたは<div class="row"><div class="clearfix hidden-xs hidden-sm"></div>にあなたは、この問題は、異なるサイズのすべての内容ということである持っている理由は、すべての2つの要素を入れなければならないのいずれか。それはのようになりますいただきました!私にはOKに見える

<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> 
関連する問題