Aucune enveloppe de colonnes Bootstrap

Question

J'ai téléchargé un modèle de site Web HTML5 prêt à l'emploi de w3layouts.com sous licence CC3.0. Parce que les scripts utilisés comme Bootstrap etc sont tous ancienne version je suis mise à jour ceux-ci et le code source pour fonctionner. Mais je suis sur un problème que je ne peux pas résoudre. Je suis nouveau dans Bootstrap et c'est la première fois que je travaille avec. Je suis fatigué de coder mes propres créations. :)

Le modèle original/ancien utilise Bootstrap v3.3.4 et j'utilise maintenant la version 4.0.0-beta.

Comme vous pouvez le voir here in the original la section "Mes services" est en forme. Mais dans my updated version les colonnes ne seront pas envelopper. J'ai déjà essayé beaucoup de choses et ai beaucoup cherché mais je n'ai trouvé aucune solution.

Voici les codes sources:

• HTML: https: // pastebin.com/NJYmqAk2
• CSS: https: // pastebin.com/AdYUTtFe

(Désolé, je a dû modifier les liens pastebin 'parce que je ne suis pas haut réputé atm. :))

Answer 1

Il semble que la version de Bootstrap que vous utilisez, ne divise pas la largeur des colonnes en%, et aussi ils ne flottent pas la gauche.

Dans votre code HTML, il y a un gros problème avec la ligne enroulée autour de chaque colonne.

<div class="row"> <!-- This wraps the column and defeats its purpose --> 
<div class="col-xs-4 wthree_about_right_grid_left"> 
    <div class="hvr-rectangle-in"> 
     <i class="glyphicon glyphicon-pencil"></i> 
    </div> 
</div> 
</div> 

Commencez par la suppression de la ligne, puis vous allez vouloir faire le flotteur gauche et colums déterminer sa largeur en%.

Comme ceci:

Ce faisant, vous pouvez l'obtenir à agir comme sur votre modèle, et finalement résoudre votre problème initial.

Vous bénéficieriez beaucoup plus de l'utilisation de la version de bootstrap compatible avec votre modèle.