Comment définir une largeur fixe pour les éléments dans Bootstrap ?-tutoriel CSS-php.cn

How to Set a Fixed Width for Elements in Bootstrap?

Comment définir la largeur fixe pour dans Bootstrap

Lorsque vous travaillez avec des éléments de données de tableau () dans des tableaux HTML, il peut être nécessaire de spécifier une largeur fixe pour ces éléments afin de garantir un alignement et une lisibilité cohérents. Cet article vous guidera à travers les différentes méthodes pour y parvenir selon la version de Bootstrap que vous utilisez.

Bootstrap 4.0

Pour Bootstrap 4.0.0, l'utilisation des classes col-* pour définition de la largeur de les éléments ne sont pas fiables. Au lieu de cela, vous pouvez utiliser l'approche suivante :

<tr>
  <th>

Copier après la connexion

Bootstrap 3.0

Dans Bootstrap 3.0, vous pouvez utiliser la classe "col-md-*" pour attribuer une largeur fixe au < ;td> éléments dans une ligne de tableau :

<tr>
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

Copier après la connexion

Bootstrap 2.0

Pour Bootstrap 2.0, la classe "span" sert le même objectif que "col-md-" dans Bootstrap 3.0 :

<tr>
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

Copier après la connexion

Considérations importantes

Il est important de noter que si la

l'élément contient

éléments (en-têtes de tableau), la largeur doit y être spécifiée plutôt que l'attribut	éléments pour assurer un bon alignement. Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois! source：php.cn Article précédent：Pourquoi « top : 50 % » ne centre-t-il pas correctement les éléments dans les mises en page réactives ? Article suivant：Comment forcer un emballage cohérent des cartes rendues dynamiquement dans Flexbox ? Déclaration de ce site Web Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn Derniers articles par auteur Derniers numéros function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ... Depuis 2024-04-29 11:01:01 0 2 1938 Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ? Depuis 2024-04-23 00:22:19 0 10 2106 La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée... Depuis 2024-04-19 15:37:47 0 1 1777 Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt... Depuis 2024-04-18 23:52:34 0 1 1678 Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel Depuis 2024-04-16 10:10:18 0 0 1688 Rubriques connexes Plus> Comment résoudre le problème de steam_api.dll manquant Comment supprimer le filigrane sur TikTok Avantages du téléchargement du site officiel de l'application Yiou Exchange Plateforme nationale de monnaie numérique Comment supprimer complètement MongoDB si l'installation échoue Quelle est l'inscription brc20 Vérifiez l'état du port occupé dans Windows Quels sont les logiciels de programmation du microcontrôleur ? Recommandations populaires Comment configurer CSS pour dépasser les ellipses d'affichage Comment définir la taille de la police en CSS Comment utiliser le survol en CSS Comment définir l'espacement des caractères en CSS Quelles sont les nouvelles fonctionnalités de CSS3 Tutoriels populaires Plus> Tutoriels associés Recommandations populaires Derniers cours Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne) 1419042 Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine 4261335 Tutoriel vidéo JAVA pour débutants 2497673 Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle 504791 Tutoriel d'introduction PHP base zéro 859890 Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne) 1419042 temps d'étude Tutoriel vidéo JAVA pour débutants 2497673 temps d'étude Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle 504791 temps d'étude Introduction rapide au développement web front-end 215477 temps d'étude Maîtrisez les didacticiels vidéo PS à partir de zéro 882042 temps d'étude [Web front-end] Démarrage rapide de Node.js 6850 temps d'étude Collection complète de cours full-stack de développement Web étranger 5298 temps d'étude Aller au langage pratique GraphQL 4460 temps d'étude Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape 646 temps d'étude Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures 22527 temps d'étude Derniers téléchargements Plus> effets Web Code source du site Web Matériel du site Web Modèle frontal [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3 [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5 [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3 [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet [Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG) [Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG) [image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS) [Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG) [Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG) [Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes [image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS) [Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG) [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！ À propos de nous Clause de non-responsabilité Sitemap © php.cn All rights reserved

éléments (en-têtes de tableau), la largeur doit y être spécifiée plutôt que l'attribut

éléments pour assurer un bon alignement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source：php.cn

Article précédent：Pourquoi « top : 50 % » ne centre-t-il pas correctement les éléments dans les mises en page réactives ? Article suivant：Comment forcer un emballage cohérent des cartes rendues dynamiquement dans Flexbox ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

1938

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2106

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1777

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...