9
votes

Besoin de concevoir 8 boîtes dans deux rangées

Comment concevoir 8 cases comme suit en utilisant Bootstrap?

s'il vous plaît ignorer les couleurs chaque boîte serait être similaire à une carte de visite . .
Ils ne devraient être que 8 cases dans deux rangées.
avec marges spécifiques à droite et à gauche dans les grands écrans et non Marge dans les petits écrans . Donc, dans la tablette devrait être 2 et dans le mobile Version seulement 1 par ligne. Également besoin de s'assurer que la taille des boîtes est tous de la même taille.
démo xxx

css twitter-bootstrap twitter-bootstrap-3

2 commentaires

Faut-il être en bootstrap?

@Jasonlydon Pas nécessairement, Bootstrap n'est que l'option préférée.

10 Réponses :

0
votes

Vous devez ajouter col-lg-3 code> à votre div un peu de code ci-dessous. de
<div class="row"> <div class="col-lg-12"> <h1 class="page-header">Thumbnail Gallery</h1> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="#" class="thumbnail"> <img alt="" src="http://placehold.it/400x300" class="img-responsive"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="#" class="thumbnail"> <img alt="" src="http://placehold.it/400x300" class="img-responsive"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="#" class="thumbnail"> <img alt="" src="http://placehold.it/400x300" class="img-responsive"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="#" class="thumbnail"> <img alt="" src="http://placehold.it/400x300" class="img-responsive"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="#" class="thumbnail"> <img alt="" src="http://placehold.it/400x300" class="img-responsive"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="#" class="thumbnail"> <img alt="" src="http://placehold.it/400x300" class="img-responsive"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="#" class="thumbnail"> <img alt="" src="http://placehold.it/400x300" class="img-responsive"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="#" class="thumbnail"> <img alt="" src="http://placehold.it/400x300" class="img-responsive"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="#" class="thumbnail"> <img alt="" src="http://placehold.it/400x300" class="img-responsive"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="#" class="thumbnail"> <img alt="" src="http://placehold.it/400x300" class="img-responsive"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="#" class="thumbnail"> <img alt="" src="http://placehold.it/400x300" class="img-responsive"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="#" class="thumbnail"> <img alt="" src="http://placehold.it/400x300" class="img-responsive"> </a> </div> </div> </div>

2 commentaires

Merci, cela rend les cases un peu plus grandes mais ne résout pas les autres problèmes. Comme je l'ai dit, ils ne contenaient que des images seulement, elles sont comme des cartes de visite. Un autre problème est que je ne veux pas qu'ils soient au milieu de la page, ils devraient avoir une marge spécifique de gauche et de droite.

Vous pouvez personnaliser ce code en fonction de votre choix,
est le seul conteneur. Vous pouvez mettre n'importe quoi dans cela. Et vous pouvez écraser la marge sur "COL-MD-4".

0
votes

Utilisez le marquage suivant
<div class="container"> <div class="row"> <div class="col-sm-12 col-md-6 col-lg-3"> <div style="border-style: solid; padding: 1%;"> <div class="row"> <div class="col-xs-6"> <h4>Title</h4> <p>Name</p> <p>Family</p> <p> Description </p> </div> <div class="col-xs-6"> <img class="img-responsive" src="www.example.com/photo"> </div> </div> </div> </div> <div class="col-sm-12 col-md-6 col-lg-3"> <div style="border-style: solid; padding: 1%;"> <div class="row"> <div class="col-xs-6"> <h4>Title</h4> <p>Name</p> <p>Family</p> <p> Description </p> </div> <div class="col-xs-6"> <img class="img-responsive" src="www.example.com/photo"> </div> </div> </div> </div> <div class="col-sm-12 col-md-6 col-lg-3"> <div style="border-style: solid; padding: 1%;"> <div class="row"> <div class="col-xs-6"> <h4>Title</h4> <p>Name</p> <p>Family</p> <p> Description </p> </div> <div class="col-xs-6"> <img class="img-responsive" src="www.example.com/photo"> </div> </div> </div> </div> <div class="col-sm-12 col-md-6 col-lg-3"> <div style="border-style: solid; padding: 1%;"> <div class="row"> <div class="col-xs-6"> <h4>Title</h4> <p>Name</p> <p>Family</p> <p> Description </p> </div> <div class="col-xs-6"> <img class="img-responsive" src="www.example.com/photo"> </div> </div> </div> </div> </div> <div class="row" > <div class="col-sm-12 col-md-6 col-lg-3"> <div style="border-style: solid; padding: 1%; "> <div class="row"> <div class="col-xs-6"> <h4>Title</h4> <p>Name</p> <p>Family</p> <p> Description </p> </div> <div class="col-xs-6"> <img class="img-responsive" src="www.example.com/photo"> </div> </div> </div> </div> <div class="col-sm-12 col-md-6 col-lg-3"> <div style="border-style: solid; padding: 1%;"> <div class="row"> <div class="col-xs-6"> <h4>Title</h4> <p>Name</p> <p>Family</p> <p> Description </p> </div> <div class="col-xs-6"> <img class="img-responsive" src="www.example.com/photo"> </div> </div> </div> </div> <div class="col-sm-12 col-md-6 col-lg-3"> <div style="border-style: solid; padding: 1%;"> <div class="row"> <div class="col-xs-6"> <h4>Title</h4> <p>Name</p> <p>Family</p> <p> Description </p> </div> <div class="col-xs-6"> <img class="img-responsive" src="www.example.com/photo"> </div> </div> </div> </div> <div class="col-sm-12 col-md-6 col-lg-3"> <div style="border-style: solid; padding: 1%;"> <div class="row"> <div class="col-xs-6"> <h4>Title</h4> <p>Name</p> <p>Family</p> <p> Description </p> </div> <div class="col-xs-6"> <img class="img-responsive" src="www.example.com/photo"> </div> </div> </div> </div> </div> </div>

1 commentaires

Merci, le problème est que vous les mettez dans un conteneur, ils ne devraient pas être au milieu, veuillez lire la dernière balle, un autre problème est que vous tapez de longs textes qu'ils vont au-delà de la bordure de la boîte.

0
votes

Vous pouvez utiliser une méthode simple utilise la transe: les deux concept après tous les 4 éléments d'une rangée xxx

1 commentaires

Merci, je l'ai utilisé mais il n'y a pas d'espace entre les boîtes et dans l'écran de petite taille, le texte (description) est sorti de la bordure de la boîte.

0
votes

Essayez avec ce code: démo
Mettre à jour la démo de liaison avec classe de couleur de fond
html: xxx
CSS: xxx

1 commentaires

Merci, le problème est que, par exemple, vous avez un long contenu pour la boîte en haut à gauche, la taille des autres cases ne changera pas. De cette façon, les boîtes ne seront pas toujours les mêmes, quelle que soit la taille de leur contenu.

0
votes

En supposant que vous utilisez Bootstrap: -
<div class="row"> <div class="col-md-12"> <div class="col-md-3"> hello </div> <div class="col-md-3"> hello </div> <div class="col-md-3"> hello </div> <div class="col-md-3"> hello </div> </div> </div>  <div class="row"> <div class="col-md-12"> <div class="col-md-3"> hello </div> <div class="col-md-3"> hello </div> <div class="col-md-3"> hello </div> <div class="col-md-3"> hello </div> </div> </div>

0 commentaires

3
votes

Ma compréhension de votre question est que vous souhaitez que le conteneur margin-gauche code> et droite code> doit être supprimé sur des écrans plus petits, les cartes touchent ainsi le bord de l'écran.
La démo ci-dessous présente les 8 cartes de deux rangées. J'ai ajouté quelques Padding code> et Marge code> pour même l'espacement des cartes, la règle nth-enfant code> est utilisée pour appliquer cela au bon Carte. P>
Si vous voulez garder la marge gauche et droite, vous pouvez simplement exclure mes requêtes de média. P>
démo ici strong> p> p>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="container"> <h3>Heading</h3> <div class="row card-row"> <div class="card col-xs-12 col-sm-6 col-md-3"> <div class="inner"> <p>hello</p> </div> </div> <div class="card col-xs-12 col-sm-6 col-md-3"> <div class="inner"> <p>hello</p> </div> </div> <div class="card col-xs-12 col-sm-6 col-md-3"> <div class="inner"> <p>Hello, I am beautiful content... please change me!</p> </div> </div> <div class="card col-xs-12 col-sm-6 col-md-3"> <div class="inner"> <p>hello</p> </div> </div> </div> <div class="row card-row"> <div class="card col-xs-12 col-sm-6 col-md-3"> <div class="inner"> <p>hello</p> </div> </div> <div class="card col-xs-12 col-sm-6 col-md-3"> <div class="inner"> <p>hello</p> </div> </div> <div class="card col-xs-12 col-sm-6 col-md-3"> <div class="inner"> <p>Hello, I am beautiful content... please change me!</p> </div> </div> <div class="card col-xs-12 col-sm-6 col-md-3"> <div class="inner"> <p>hello</p> </div> </div> </div> </div>

5 commentaires

Merci le problème est que je devrais avoir un titre
au-dessus de la section. Il devrait être situé dans le coin supérieur gauche de la section. Également dans les grands écrans, il devrait être laissé et que des marges droites pour la section.

C'est cela, je viens de trouver un nouveau problème, si vous ajoutez plus de contenu à chaque case, les tailles seraient les mêmes. Par exemple, ajouter cela à la première case
Nom
49 585 585 585

D FSDF SDFSDFSDFDSF
xx xxx xxxx xxxx xxxxx xxxx i Je travaille dessus.

Bon, heureux la première partie est là! Évidemment, vous voulez que la hauteur de la carte réponde au contenu, mais si vous modifiez 1 boîte (avec le contenu que vous avez ajouté) Voulez-vous que tous les autres de la ligne correspondent à la hauteur?

Oui, merci, la réponse de Jason Lydon est également correcte, bien qu'elle ait quelques problèmes, par exemple si vous tapez un texte long pour l'une des boîtes dont la hauteur d'autres augmente, mais leur largeur est toujours la même. Si vous tapez un texte long et n'utilisez pas
, il irait au-delà de la bordure de la boîte. C'est une question simple mais a de nombreux détails.

Jack , on s'attendrait généralement à ce que la plupart des cartes de visite soient la même taille donnée. Comme certains que vous autorisez différentes hauteurs pour certaines de ces divs, vous obtiendrez un look inégal et un problème avec la manière dont Bootstrap peut les gérer pour s'écouler à différentes tailles d'écran. Pourquoi ne pas simplement garder la Hauteur fixe et simplement ajuster la taille de la police d'une DIV où vous avez besoin d'un peu plus de texte. Cela semblera plus même avoir toutes les divs de la même taille et permettra à Bootstrap de faire sa chose.

9
votes

Je sais que la question portait sur Bootstrap, mais je pensais qu'il serait utile que les gens le voient avec juste HTML et CSS. Je déteste voir des gens de travailler dur pour faire des solutions laides avec Bootstrap, lorsque cela aussi basique si vous n'avez pas utilisé de bootstrap.
CODEPEN
HTML:
Juste une liste de cartes de visite xxx
CSS:

mobile d'abord
Afficher: Flex;
0 à 599px => mise en page mobile | = | | 1 élément sur
599px à 1024px => layout tablette | = | = | | 2 articles sur

1024px et plus => mise en page de bureau | = | = | = | = | | | | 4 articles sur XXX
Il y a beaucoup de façons d'optimiser cet exemple ou de la modifier pour atteindre vos objectifs. J'espère que cela vous aidera.
[mise à jour] J'ai ajouté les préfixes pour Affichage: flex; et flex-wrap: enveloppement; , mais si vous le pouvez, vous devez ajouter Autoprefixer à votre flux de travail!
3 commentaires Grand merci, le seul problème est que je ne suis pas sûr de savoir comment mettre un titre pour la section. Le titre doit être situé au-dessus de la section située dans le coin supérieur gauche. Il y a un problème avec le code s'il vous plaît vérifier la question suivante Stackoverflow.com/Questtions/31018323/... Il doit y avoir des préfixes pour flex , je vais l'ajouter à l'échantillon.
0 votes Utilisez le balisage suivant: .container-fluid{ overflow: hidden; } .row{margin: 0 -30px;} .card{ border: 1px solid red; margin: 15px 0; padding: 15px; background: #f0f0f0; } 0 commentaires 0 votes Celui-ci pourrait aider système de grille bootstrap p> HTML: FORT> P> P> <div class="container-fluid"> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="www.example.com/photo"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="www.example.com/photo"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="www.example.com/photo"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="www.example.com/photo"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="www.example.com/photo"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="www.example.com/photo"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="www.example.com/photo"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="www.example.com/photo"> </div> </div> 0 commentaires 0 votes Celui-ci pourrait aider système de grille bootstrap p> HTML: FORT> P> P> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid"> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg"> </div> </div> 0 commentaires
Articles qui pourrait vous intéresser : Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police? Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher Changer la direction de défilement de la page Web sur la version mobile Target first-child css styled-components