【7】了解Bootstrap栅格系统基础案例（2）_html/css_WEB-ITnose
ps.这一次要说的是“Responsive column resets”，但是不知道为什么中文官网没有给出翻译，但是在看到案例的时候，感觉这就像一个bug，我自己姑且叫这个是一个高度bug吧，方便自己，要是大家有其他好的说法，请告诉我。
=================================================================================================
Responsive column resets就是在某些阈值时，某些列可能会出现比别的列高的情况。这个情况可能不是你所要的，建议使用.clearfix（清理浮动）和响应式工具classe的组合，
清理浮动就不说了，有一定基础的都应该清楚了，至于响应式工具classe以后会说到（可以去中文官网看看），这里就是让大家知道有这么一个高度bug的情况。
=================================================================================================
直接贴代码
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <!-- Bootstrap不支持IE的兼容模式，加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 由于Bootstrap 3是移动设备优先，加入此标签是为了确保适当的绘制和触屏缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap-Template-04</title> <!-- 最新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <style>.show-grid { margin-top: 15px; }.show-grid [class^="col-"] { padding-top: 10px; padding-bottom: 10px; background-color: #eee; border: 1px solid #ddd;} </style></head><body><div class="container"><h1 id="Responsive-column-resets-small-我自己叫这个是高度bug-small">Responsive column resets<small>我自己叫这个是高度bug</small></h1><div class="row show-grid"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3<br>内容要多多---内容要多多---内容要多多---内容要多多---内容要多多---内容要多多</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div></div></div> <!-- 所有 Bootstrap 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script></body></html>首页我们先看看这个在大屏sm方案下的效果图（sm方案是3+3+3+3=12，正好一行）
从这个图上我们一眼就看到最前面的内容太多，把高度撑起来了，那在xs方案下的效果怎么样（xs方案是6+6=12一行，一共有2行）
第一种效果：
第二种效果
通过拉缩浏览器，我们看到了2种效果，但是没有一种是我们所要的效果，这时候，你是不是感觉出bug了啊，我想也是，官网给出了一种解决方案（使用.clearfix（清理浮动）和响应式工具classe的组合）
下面我们就来看看修改后的代码（我只贴出主要是地方）
<div class="row show-grid"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3<br>内容要多多---内容要多多---内容要多多---内容要多多---内容要多多---内容要多多</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <!-- 在某些阈值时，某些列可能会出现比别的列高的情况。这个情况可能不是你所要的，建议使用.clearfix（清理浮动）和响应式工具classe的组合 --> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div></div>
这时候我们来看看效果吧
这下正好是xs的方案的样子了，哈哈。
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
La multiplication matricielle universelle de CUDA : de l'entrée à la maîtrise !
Mar 25, 2024 pm 12:30 PM
La multiplication matricielle générale (GEMM) est un élément essentiel de nombreuses applications et algorithmes, et constitue également l'un des indicateurs importants pour évaluer les performances du matériel informatique. Une recherche approfondie et l'optimisation de la mise en œuvre de GEMM peuvent nous aider à mieux comprendre le calcul haute performance et la relation entre les systèmes logiciels et matériels. En informatique, une optimisation efficace de GEMM peut augmenter la vitesse de calcul et économiser des ressources, ce qui est crucial pour améliorer les performances globales d’un système informatique. Une compréhension approfondie du principe de fonctionnement et de la méthode d'optimisation de GEMM nous aidera à mieux utiliser le potentiel du matériel informatique moderne et à fournir des solutions plus efficaces pour diverses tâches informatiques complexes. En optimisant les performances de GEMM
Le système de conduite intelligent Qiankun ADS3.0 de Huawei sera lancé en août et sera lancé pour la première fois sur Xiangjie S9
Jul 30, 2024 pm 02:17 PM
Le 29 juillet, lors de la cérémonie de lancement de la 400 000e nouvelle voiture d'AITO Wenjie, Yu Chengdong, directeur général de Huawei, président de Terminal BG et président de la BU Smart Car Solutions, a assisté et prononcé un discours et a annoncé que les modèles de la série Wenjie seraient sera lancé cette année En août, la version Huawei Qiankun ADS 3.0 a été lancée et il est prévu de pousser successivement les mises à niveau d'août à septembre. Le Xiangjie S9, qui sortira le 6 août, lancera le système de conduite intelligent ADS3.0 de Huawei. Avec l'aide du lidar, la version Huawei Qiankun ADS3.0 améliorera considérablement ses capacités de conduite intelligente, disposera de capacités intégrées de bout en bout et adoptera une nouvelle architecture de bout en bout de GOD (identification générale des obstacles)/PDP (prédictive prise de décision et contrôle), fournissant la fonction NCA de conduite intelligente d'une place de stationnement à l'autre et mettant à niveau CAS3.0
Comment introduire le bootstrap dans Eclipse
Apr 05, 2024 am 02:30 AM
Introduisez Bootstrap dans Eclipse en cinq étapes : Téléchargez le fichier Bootstrap et décompressez-le. Importez le dossier Bootstrap dans le projet. Ajoutez une dépendance Bootstrap. Chargez Bootstrap CSS et JS dans des fichiers HTML. Commencez à utiliser Bootstrap pour améliorer votre interface utilisateur.
Comment lire les résultats du test d'effet de médiation bootstrap dans stata
Apr 05, 2024 am 01:48 AM
Étapes d'interprétation du test d'effet de médiation Bootstrap dans Stata : Vérifier le signe du coefficient : Déterminer le sens positif ou négatif de l'effet de médiation. Valeur p du test : inférieure à 0,05 indique que l'effet médiateur est significatif. Vérifiez l'intervalle de confiance : ne pas contenir de zéro indique que l'effet de médiation est significatif. La comparaison de la valeur p médiane : inférieure à 0,05 confirme en outre l’importance de l’effet de médiation.
Comment introduire une idée dans bootstrap
Apr 05, 2024 am 02:33 AM
Étapes pour introduire Bootstrap dans IntelliJ IDEA : Créez un nouveau projet et sélectionnez « Application Web ». Ajoutez la dépendance Maven "Bootstrap". Créez un fichier HTML et ajoutez des références Bootstrap. Remplacez par le chemin réel du fichier CSS Bootstrap. Exécutez le fichier HTML pour utiliser les styles Bootstrap. Astuce : Vous pouvez utiliser un CDN pour importer Bootstrap ou personnaliser des modèles de fichiers HTML.
750 000 rounds de bataille en tête-à-tête entre grands modèles, GPT-4 a remporté le championnat et Llama 3 s'est classé cinquième
Apr 23, 2024 pm 03:28 PM
Concernant Llama3, de nouveaux résultats de tests ont été publiés - la grande communauté d'évaluation de modèles LMSYS a publié une liste de classement des grands modèles, Llama3 s'est classé cinquième et à égalité pour la première place avec GPT-4 dans la catégorie anglaise. Le tableau est différent des autres benchmarks. Cette liste est basée sur des batailles individuelles entre modèles, et les évaluateurs de tout le réseau font leurs propres propositions et scores. Au final, Llama3 s'est classé cinquième sur la liste, suivi de trois versions différentes de GPT-4 et Claude3 Super Cup Opus. Dans la liste simple anglaise, Llama3 a dépassé Claude et est à égalité avec GPT-4. Concernant ce résultat, LeCun, scientifique en chef de Meta, était très heureux et a transmis le tweet et
Toujours nouveau ! Mises à niveau de la série Huawei Mate60 vers HarmonyOS 4.2 : amélioration du cloud AI, le dialecte Xiaoyi est si facile à utiliser
Jun 02, 2024 pm 02:58 PM
Le 11 avril, Huawei a officiellement annoncé pour la première fois le plan de mise à niveau de 100 machines HarmonyOS 4.2. Cette fois, plus de 180 appareils participeront à la mise à niveau, couvrant les téléphones mobiles, les tablettes, les montres, les écouteurs, les écrans intelligents et d'autres appareils. Au cours du mois dernier, avec la progression constante du plan de mise à niveau de 100 machines HarmonyOS4.2, de nombreux modèles populaires, notamment Huawei Pocket2, la série Huawei MateX5, la série nova12, la série Huawei Pura, etc., ont également commencé à être mis à niveau et à s'adapter, ce qui signifie qu'il y aura davantage d'utilisateurs de modèles Huawei pourront profiter de l'expérience commune et souvent nouvelle apportée par HarmonyOS. À en juger par les commentaires des utilisateurs, l'expérience des modèles de la série Huawei Mate60 s'est améliorée à tous égards après la mise à niveau d'HarmonyOS4.2. Surtout Huawei M
Comment utiliser bootstrap pour tester l'effet de la médiation
Apr 05, 2024 am 03:57 AM
Le test Bootstrap utilise la technologie de rééchantillonnage pour évaluer la fiabilité du test statistique et est utilisé pour prouver la signification de l'effet de médiation : premièrement, calculer l'intervalle de confiance de l'effet direct, de l'effet indirect et de l'effet de médiation, deuxièmement, calculer la signification de l'effet de médiation ; type de médiation selon la méthode de Baron et Kenny ou Sobel et enfin estimer l'intervalle de confiance pour l'effet indirect naturel.
