bootstrap-4 相关问题

我希望缩略图显示在卡片上，如代码第一部分所示 5)); ?> 我希望缩略图显示在卡片上，如代码第一部分所示  <?php $posts = get_posts(array('posts_per_page' => 5)); ?> <div class="container text-center"> <h3>Diseño general</h3> <div class="row"> <div class="col-md-4"> <div class="card bg-dark text-white"> <img src="https://es.unesco.org/sites/default/files/ai-conference-middle.jpg" class="card-img" alt="..."> <div class="card-img-overlay"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">Last updated 3 mins ago</p> </div> </div> </div> </div> </div>  <div class="container text-center p-3">  <?php $args = array( 'category_name' => 'Noticias', 'posts_per_page' => 1 ); $news_query = new WP_Query($args); ?> <h3>Diseño individual</h3> <div class="container"> <div class="row"> <?php if ($news_query->have_posts()) : while ($news_query->have_posts()) : $news_query->the_post(); ?> <div class="col-sm-12 col-md-6 col-lg-4 mb-4 align-items-center"> <div class="card text-light card-has-bg click-col"> <div class="card-img-overlay d-flex flex-column"> <div class="card-body"> <h4 class="card-title mt-0 "><a class="text-light" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4> <small><i class="far fa-clock"></i> <?php the_date('j F Y');?></small> </div> <div class="card-footer"> <div class="media"> <div class="media-body"> <h6 class="my-0 text-light d-block">Nombre Autor</h6> </div> </div> </div> </div> </div> </div> <?php endwhile; endif; wp_reset_postdata(); ?> </div> </div> <br><br> <a href="https://catedra-unesco-uneir.org/category/noticias" class="btn btn-uneir">Ver más</a> </div> 我做了从 img src 到 the_post_thumbnail 的转换，但我没有得到我需要的结果，我等待你的答案。每个代码的结果可以在以下 URL 找到：cognition.com.mx 我还给你留了截图：我不太确定我是否理解你的问题。您必须在代码中添加 the_post_thumbnail(); 。您可以在这里找到更多信息： Wordpress 帖子缩略图参考 <div class="container text-center"> <h3>Diseño general</h3> <div class="row"> <div class="col-md-4"> <div class="card bg-dark text-white"> <img src="https://es.unesco.org/sites/default/files/ai-conference-middle.jpg" class="card-img" alt="..."> <div class="card-img-overlay"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">Last updated 3 mins ago</p>  <?php the_post_thumbnail('full', ['class' => 'card-img']); ?> </div> </div> </div> </div> </div> ['class' => 'card-img'] 数组将card-img 类添加到缩略图中。你可以根据需要修改CSS。

php wordpress bootstrap-4 bootstrap-cards

回答 1 投票 0

在图标旁边显示文本

我正在尝试在图标旁边显示文本：这是图标：当我将文本放在图标旁边时。第一行“测试：是简单的虚拟......”出现在

html css bootstrap-4 flexbox

回答 1 投票 0

在图标下方显示文本

我正在尝试在图标旁边显示文本：这是图标：当我将文本放在图标旁边时。第一行“测试：是简单的虚拟......”出现在

html css bootstrap-4 flexbox

回答 1 投票 0

为什么我的 html 网站加载速度如此之慢并且在切换到另一个程序后冻结？

我正在制作 3 个网站，其中两个工作得很好，但最后一个由于某种原因加载非常慢，如果我稍等一下，它会加载并工作得很好，但如果我 alt+tab 到其他东西，整个网站j...

html css performance bootstrap-4 freeze

回答 1 投票 0

属性宽度：100% 不适合可打印区域，包含引导程序时位置固定

我正在尝试使用 Bootstrap 样式打印 HTML 页面，但是当我包含 Bootstrap 的链接时，位置为固定且宽度为 100% 的 div 无法适合可打印区域。当我删除

css bootstrap-4

回答 1 投票 0

引导程序中的相同行尺寸

我正在尽力解释它。我正在使用引导程序。我有两列，左边一列是图像，右边另一列是标题和描述。我需要让照片填满......

html css image twitter-bootstrap bootstrap-4

回答 1 投票 0

我不知道如何为我的引导卡添加间距，并且当我向上滚动到卡片部分时我的页面不断重叠

我正在创建一个滚动时具有不同部分的登陆页面。我有 2 个问题。当我向下滚动时，当我制作屏幕时，第二部分的内容与页面的顶部重叠...

html bootstrap-4 overlapping bootstrap-cards

回答 1 投票 0

模态主体中的弹出框被模态页脚覆盖

我有一个带有几个按钮的 Bootstrap 4 模式，其中一个应该切换一个自定义弹出框 div，它位于触发它的按钮下方的中心。当...

html css twitter-bootstrap bootstrap-4 bootstrap-modal

回答 1 投票 0

Bootstrap Vue - 如何将表单radio更改为50%

我使用 Bootstrap-vue，并尝试将 b-form-radio-group 的标签设置为移动设备的 50%。我有以下代码结构：我使用 Bootstrap-vue 并尝试将 b-form-radio-group 的移动标签设置为 50%。我有以下代码结构： <b-col cols="12" sm="auto" class="text-center"> <b-form-group> <b-form-radio-group button-variant="outline-primary" buttons class="w-100" ></b-form-radio-group> </b-form-group> </b-col> 目前我看到这样的单选按钮：如何将单选按钮的宽度更改为每个 50%，并像这样查看它们（如果可以，无需 CSS 样式）： <b-col cols="12" class="text-center"> <b-form-group> <b-form-radio-group button-variant="outline-primary" buttons class="w-100" ></b-form-radio-group> </b-form-group> </b-col> 删除 b-col 内的 sm="auto"

twitter-bootstrap bootstrap-4 bootstrap-vue

回答 1 投票 0

使用 bootstrap 4 时图像和 h1 未按预期响应

我有 2 个 Div ，1 个用于图像，1 个用于标题。我根据 CSS 文件中的不同媒体查询设置了不同的字体大小。虽然它在缩小宽度的同时起作用，但标题并没有在 2 中断裂......

html css bootstrap-4

回答 1 投票 0

如何在asp.net core中添加换行符

如何显示具有换行符的 HTML 文本并保留这些换行符公共无效OnGet（） { ViewData["Msg"] = "你好世界你好世界你好，沃...

html asp.net-mvc asp.net-mvc-4 bootstrap-4

回答 1 投票 0

在 Bootstrap 导航栏中居中品牌徽标

我正在尝试实现 Bootstrap 3 导航栏，以便品牌徽标始终保持在中间。这是代码：我正在尝试实现 Bootstrap 3 导航栏，以便品牌徽标始终保持在中间。这是代码： <div class="navbar navbar-fixed-top navbar-default"> <div class="navbar-inner"> <div class="container"> <button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" style="margin: 0; float: none;" href="#"> <img src="/Content/themes/next/images/logo.png" /></a> <div class="nav-collapse"> <ul class="nav"> <li> <a href="#">Item 1</a></li> <li> <a href="#">Item 1</a></li> <li> <a href="#">Item 1</a></li> </ul> </div> <ul class="nav pull-right"> <li> <a href="#"> <div class="nextCog"></div> </a> </li> </ul> <span class="navbar-text pull-right">superpup1 </span> </div> </div> </div> 它制作了一个漂亮的导航栏：但是，我希望徽标（绿色）始终保留在中间。我将此样式添加到具有“品牌”类别的标签中： <a class="brand" style="margin: 0; float: none; text-align:center" href="#"> <img src="/Content/themes/next/images/logo.png" /> </a> 它部分解决了问题：徽标位于中间，但它将其余的导航栏元素向下推：这是我想消除的不良影响。你能提出一个解决方案吗？也许从一开始就将徽标居中的方法是错误的？试试这个： .navbar { position: relative; } .brand { position: absolute; left: 50%; margin-left: -50px !important; /* 50% of your logo width */ display: block; } 将徽标居中 50% 并减去徽标宽度的一半，这样在放大和缩小时就不会出现问题。参见小提琴最简单的方法是css变换： .navbar-brand { transform: translateX(-50%); left: 50%; position: absolute; } 演示：http://codepen.io/candid/pen/dGPZvR 这种方式也适用于徽标的动态大小背景图像，并允许我们利用文本隐藏类： CSS： .navbar-brand { background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat; transform: translateX(-50%); left: 50%; position: absolute; width: 200px; /* no height needed ... image will resize automagically */ } HTML： <a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text </a> 我们也可以使用 Flexbox。然而，使用这种方法我们必须将 navbar-brand 移到 navbar-header 之外。这种方式很棒，因为我们现在可以并排显示图像和文本： .brand-centered { display: flex; justify-content: center; position: absolute; width: 100%; left: 0; top: 0; } .navbar-brand { display: flex; align-items: center; } 演示：http://codepen.io/candid/pen/yeLZax 要仅在移动设备上实现这些结果，只需将上述 css 包装在媒体查询中： @media (max-width: 768px) { } Bootstrap 5（2022 年更新）在 Bootstrap 5 中，mx-auto 或 flexbox justify-content-center 仍然可以用于将品牌和其他元素居中。 https://codeply.com/p/UKfeHAJQQC Bootstrap 4（2018 年更新）在Bootstrap 4中，mx-auto或flexbox可用于将品牌和其他元素居中。有关说明，请参阅如何在 Bootstrap 中居中定位导航栏内容。 Bootstrap 3（原始答案）看看这个例子是否有帮助：https://codeply.com/p/G71Uruhqwy 品牌以..为中心 .navbar-brand { position: absolute; width: 100%; left: 0; top: 0; text-align: center; margin: auto; } 您的标记适用于 Bootstrap 2，而不是 3。不再有 navbar-inner。编辑 - 另一种方法是使用 transform: translateX(-50%); .navbar-brand { transform: translateX(-50%); left: 50%; position: absolute; } https://codeply.com/p/3kkmEHtVGH 另请参阅：引导导航栏左对齐、居中或右对齐项目老问题，但仅供后代使用。我发现最简单的方法是将图像作为导航栏品牌的背景图像。只需确保输入自定义宽度即可。 .navbar-brand { margin-left: auto; margin-right: auto; width: 150px; background-image: url('logo.png'); } <style> .navbar-brand { margin: auto; } </style>  <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="logo goes here" width="100" height="100" class="logo" alt="" loading="lazy"> </a> </nav> 徽标真正居中且链接合理的解决方案。导航的最大推荐链接数为 6，具体取决于每个链接中单词的长度。如果您有 5 个链接，请插入一个空链接并使用以下样式设置： class="hidden-xs" style="visibility: hidden;" 这样链接的数量总是偶数。 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <style> .navbar-nav > li { float: none; vertical-align: bottom; } #site-logo { position: relative; vertical-align: bottom; bottom: -35px; } #site-logo a { margin-top: -53px; } </style> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Nav</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav nav-justified navbar-nav center-block"> <li class="active"><a href="#">First Link</a></li> <li><a href="#">Second Link</a></li> <li><a href="#">Third Link</a></li> <li id="site-logo" class="hidden-xs"><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li> <li><a href="#">Fourth Link</a></li> <li><a href="#">Fifth Link</a></li> <li class="hidden-xs" style="visibility: hidden;"><a href="#">Sixth Link</a></li> </ul> </div> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 要查看结果，请单击 run snippet，然后单击 full page 小提琴由于它是一个 Flexbox（可能是由于 justify-content:space-between BT4 css 属性。），如果您添加第三个元素（名称和按钮的同级元素），它会自然地将代码中的第二个元素居中。我只是在 a 之后添加 <span>login</span> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-expand-sm navbar-light bg-light mt-5"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <span>login</span> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> 就我而言，徽标的高度很重要，因为它设置了标题的高度。所以一个简单的技巧就是放两个标志。一个隐藏的将设置标题最小高度，这样徽标就不会被裁剪。另一个处于绝对位置，如Brian Willis 的回答。 JSFiddle HTML： <header class="bg-primary"> <nav class="navbar"> <p>Left-content</p> <a class="navbar-brand bg-secondary" href="/"> <img src="" alt="My-logo"> </a>  <img class="logo-hidden" src="" alt="My-logo"> <p>Some-right-content-that-is-a-bit-too-large</p> </nav> </header> CSS： .navbar-brand { transform: translateX(-50%); position: absolute; left: 50%; } .logo-hidden { visibility: hidden; } img { font-size: 4rem; }

css twitter-bootstrap-3 bootstrap-4

回答 8 投票 0

v-bind:style 伪元素::在内容图标之后

我有一个 Bootstrap Vue ProgressBar。我需要将带有内容图标（来自 FontAwesome）的伪元素 ::after 添加到带有 .progress-bar 类的元素。我也希望它是动态的。我有

html css vue.js bootstrap-4

回答 4 投票 0

如果发生情况则生成警报消息，否则显示应用程序

目标：如果发生某种情况（即 URL 路径名中没有数据），我想弹出一个警报组件否则渲染应用程序到目前为止我尝试过的 app.layout = dbc.Container([ dbc.Alert([...

bootstrap-4 callback plotly plotly-dash

回答 2 投票 0

bootstrap-4 相关问题

最新问题