Responsive design 答复清单项目
我有一个列表项目，我想他们自动扩展到父宽度。我的html如下所示： <div class="wrapper"> <div class="playlistHolder"> <div class="playlist_inner"> <ul> <li>Coffee</li> <li>Tea</li> <li>
我有一个列表项目，我想他们自动扩展到父宽度。我的html如下所示： <div class="wrapper"> <div class="playlistHolder"> <div class="playlist_inner"> <ul> <li>Coffee</li> <li>Tea</li> <li>
我目前正试图通过让内容更吸引人来提升SilverStripe网站的活力。该网站反应迅速，但这一切都意味着当前导航栏/标题在到达移动断点时会捕捉到一种更适合移动的样式 它的长短是，我的主要页面。ss是： <html> <head> <title>$Title</title> </head> <body> $Header $Layout $F
我有以下html语法： <div class="kalis-img" style="background-image: url(https://example.com/myimage.jpg);"></div> 如果我想得到300px的图像，这很好。我尝试设置宽度：100%；高度：自动使此响应，但我得到一个空白图像。有没有一种方法可以使背景图像具有响应性？这里有一个想法给你： HTML <div class="kalis-img" ></div&g
好, 因此，我正在设计一个网站，需要作出反应 设计已经确定，我刚刚做了一些测试 为了让我对移动设备的媒体查询能够正常工作，在这种情况下，想想手机而不是ipad，我设置了一个媒体查询，一切看起来都很完美 为了利用这些媒体查询，我使用： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 然而，这也对ipad版本产生了影响，特别是我不需要触摸的网站的肖像版 我想我的问题是如何控制哪些设备拾取视
第一次使用twitterbs3，我试图在所有大于320px宽的视口（比如说iPhone）上实现3个相等的列。在320或更少的视口中，我希望我的列垂直堆叠 查看文档中的网格系统，我可以看到我可以使用以下类设置网格系统的流程 最大容器宽度无（自动）728px 940px 1170px 类前缀.col-.col sm-.col lg- 上面的问题似乎是，您只能控制728像素以上的任何列的布局。但是，如果我想要3个相等的列并排出现在320以上的任何对象上，而不是它们预定义的728像素，该怎么办 我正在寻
我不熟悉响应性框架，我想知道是否可以将现有html文件中的表添加到响应性框架中 如果无法使用表格，应如何显示表格数据以使其“响应”设备大小。如果将表格放入以下div；用户将能够左右滚动 <div style="width:100%; overflow:auto"> </div>
我已经完成了我的响应设计，除了adsense的实现。 例如，当访问者改变平板电脑的方向时，广告的大小应该自动改变。 目前，如果没有页面刷新，我无法让它工作。 广告只会在我刷新页面时更改，但访问者不会这样做 据了解，该计划已经实施： 支持在屏幕方向更改后更改广告大小。如果您的响应页面在设备方向更改后（例如，平板电脑或手机从纵向变为横向）更改其布局，我们将请求并加载正确尺寸的新广告，以适应新的页面布局 然而，我无法让它发挥作用。是我理解错了，还是我遗漏了什么 如果Adsense还不支持它，是否有一个
如何使这个div在高度上具有响应性 <style> .full1 { margin-bottom: 10px; margin-top: 10px; width: 100%; height: 225px; } .left1, .middle1, .right1 { float: left; width: 33%; height:100%; } </style> <body> <div class="full1">
我在那里是新的，新的响应方式，并希望第一个动力（？）处理源上 我的第一个问题：html正文中引用了哪个图像（大的还是缩略图） 如果缩略图-大的在哪里？ 是否可以加载一个足够大的图像，而不是更大的图像 提前感谢,， 卡尔在您链接到的网站中，缩略图和弹出窗口使用相同的图像 可以使用img标记上的srcset属性根据视口大小加载图像 一个简单的例子： <img srcset="small.jpg 1x, large.jpg 2x" src="small.jpg" alt="Alt t
我是Vue的新手，正在制作一个可以在桌面和移动设备上使用的项目 我正在使用vue router管理项目中的路由，并且我对某些页面有嵌套视图 例如： 我有一个设置页面 此页面具有导航角色和2个子路由（如帐户或首选项） 因此，我有3个组件，一个是设置（进行导航并具有路由器视图）。每个嵌套路由一个 这里是我的路由器配置 { path: '/settings', name: 'settings', component: Settings, children: [
我试图在我的网站上实现一个触摸屏。然而，我没有成功地在我的滑块容器中有一个响应图像。 我需要图像得到容器的完整尺寸。调整web浏览器的大小时，图像和滑块容器的大小需要作出响应 当前，我的图像比滑块容器大，并且在调整浏览器大小时不会调整大小 在这里，您可以找到我的问题示例： 我的网站： 对不起，我的英语，我是法国人…我已经查过你的代码了。只需以百分比（%ex-70%）而不是像素为单位指定父元素的特定宽度。如果元素的父元素可以按百分比进行伸缩，子元素将自动尝试响应。不要尝试width:auto浏览器
我最近开始尝试了解响应式web开发和CSS媒体查询。我得到了一个photoshop设计来转换为响应性HTML 这是我的困境。设计的总宽度只有785px。我想我从未见过宽度小于960像素的RWD？？作为一个新手，我不知道这是否是一个问题，我是否应该疯狂地尝试让它工作？主页上的布局为两列设计，其余页面为三列（左侧边栏、内容中心区域宽、右侧边栏）和四列页脚 我是否应该回到设计师那里，告诉他，他需要把整个东西做得更宽一些？我真的很想避免这样做，因为他已经聘请了其他机构来根据这种设计在印刷品上建立他的品牌
iPhone和其他智能手机呈现一个320像素的虚拟窗口。为此，我使用了元标记视口： <meta name="viewport" content="width=device-width"> 唯一的问题是，我的设计师希望每部智能手机的渲染速度都达到480px。因此，我尝试了width=480px，但我不希望涉及平板电脑。只有智能手机才能使用480px的宽度。没有PHP或JavaScript，有没有专业的方法来解决这个问题？你能澄清一下用480px渲染是什么意思吗？其含义尚不清楚。1 i
我在回复图片方面通常存在一个问题：我创建的网站通常有两到四个栏目。当我有一个三列或四列的网格，每列都有一个图像时，图像非常小。在移动设备上，列将被分解为一列，因此图像显示得更大 但每个响应图像解决方案都只查找视口，这意味着，在大屏幕上请求大图像（尽管图像显示非常小，因为它们是列），而在移动设备上请求小图像 是否有一个响应图像解决方案，负责图像的宽度或图像周围元素的宽度
如何使用ADF 11g中的Trinidad组件为桌面PC设计响应web的应用程序 特立尼达组件设计应用程序是否可以支持web响应式设计？响应式设计需要某种形式的整洁HTML，但最重要的是样式表 样式表在特立尼达是没有问题的。请参阅有关如何自定义样式表的文档 HTML是另一回事。如果您使用Trinidad的core renderkit，您将得到许多表。不是响应性设计的最佳选择。您可以创建自己的renderkit。。。从未尝试过，但我想这是一个很大的工作 如果您的应用程序不太复杂，您可能只需要使用蒙
我正在为我的女朋友制作一个网站，她是销售包的 ，我使用ElevateToom制作产品，但无法使其适应屏幕大小 $zoom_01.ElevateToom{gallery:'cartera'，zoomType:'inner'，cursor:'pointer'，responsive:true，ContainerInnerZoom:true，galleryActiveClass:'active'，imageCrossfade:true，ZoomizeMode:'image'，loadingIcon:'
网格是一个很好的桌子，非常适合桌面或平板电脑等宽屏幕。但是，当在较小的移动设备上显示时，网格将不能容纳超过几个列。您是如何在应用程序中解决此问题的 表堆栈模式听起来很有希望： 但是我如何用Vaadin流实现这个呢？是否可以根据屏幕大小使用项目列表交换网格？我会选择媒体查询。这里有一个将它们包含在样式中的示例： 因此，例如，如果宽度小于某个预定义值，则在需要时将网格的可见性设置为隐藏，将列表设置为可见，反之亦然 编辑：还有一个附加组件可能有助于使用查询：常用的方法是为移动和桌面设置单独的列 在移动
如何创建响应电子邮件模板 我可以使用媒体查询构建响应性布局，但这些样式只能用外部/内部CSS编写。电子邮件模板我们不能使用DIV和外部/内部CSS。 如何构建响应电子邮件模板 谢谢， Shanid您需要了解，响应式电子邮件虽然可能，但不能在每个邮件客户端上工作。举个例子，Gmail会从邮件中去掉你所有的头标签，因此不允许媒体查询，因此没有响应能力。根据我的测试，响应电子邮件可以在Outlook、Apple Mail和其他一些标准媒体查询中显示。对于这些，您必须使用典型的断点并将其应用于tr或td
我们想在页面的某个地方加载DIV中的响应网站。此div小于视图端口。应用于这个DIV（以及相应的网站）的CSS使用媒体查询来改变它的外观 问题是这些媒体查询使用的是完整页面的实际查看端口，而不是包含响应网站的DIV的宽度。因此，响应性网站可能看起来完全错误 有没有办法改变@media查询使用的视图端口大小？或者以任何方式影响桌面设备上的查看端口 注意，由于某些限制，我们不能使用iFrame。iFrame可以解决这个问题。通过此DIV查看站点时，您是否能够更改其CSS？如果是这样，您可以将容器元素
我使用Bootstrap3作为模式框。我使用I框架使用数据src属性加载外部内容 <div class="container"> <a class="modalButton" data-toggle="modal" data-src="http://www.sitepoint.com/" data-height=320 data-width=450 data-target="#myModal">Click me</a> <div class
我最近把一个网站迁移到了Joomla，这个旧网站使用了bootstrap，而且响应速度很快。 然而，当我在Joomla支持的新网站上使用相同的模板时，它根本没有响应能力 我认为它本质上是响应性的，有没有其他配置可以让它响应 注意：我不是网页设计师，所以简单的解释就好了。基本上，Joomla是用一些老式模板开箱即用的。虽然bootstrap已经进入joomla库，但并不意味着它已经被使用 幸运的是，有许多免费模板都有自己的框架，它们使用bootstrap来创建一个随时可用的响应式网站 我觉得建议使
我想创建一个布局，有2个项目并排，每个项目有3列。第一列和第二列为固定宽度，第三列需要填充其余宽度，并根据文本需要增加高度。这两个并列项目将是项目父分区的50%拆分。如下所示 ------------------------------------------- ------------------------------------------- | col1 | col2 | col 3 with copy that wraps | | col1 | col2 | col 3 wit
作为一个新的测试自动化框架评估的一部分，我想看看我们是否可以自动化测试一个网站的响应性设计。为了让您有一个更好的想法，今天我们使用GALEN框架来实现这一点。我们的测试包括像素点、高度、宽度、颜色、容器大小、页面元素（上、下、侧）的位置等。我们使用Java Selenium创建WebDriver对象，然后将其传递给Galen进行测试 对于断言，我们使用一个spec文件，其中提到了视觉/响应设计需求。GALEN可以为我们做的事情如下： 我试图看看我是否可以用testCafe完成这项工作，但我不确定
这几周我将创建一个响应性强的网页设计。我读过很多关于响应式网页设计的书，其中一个方法是关于网格系统。有978网格系统，或12列网格系统，等等。我只是不太确定它是用来做什么，以及如何实现与文件已经从网站上提供。网站示例： 你能给我解释一下24柱网、12柱网、16柱网和更多柱网的区别吗 谢谢你的建议。我是一名前端web开发人员，虽然我设计了一些布局，但无论如何我都不自称是“专家设计师”。但我确实有很多用HTML、CSS3和Javascript构建响应性设计的经验，这就是我下面的经验/评论的来源： 我
我们有一个利用JavaScript的解决方案，但我也很好奇是否有一种方法可以用纯CSS实现这一点 形势 我对响应性设计相对较新，过去一直坚持定位等方法来实现我的布局。我试图创建一个简单的响应头，以特定的方式调整大小 我的困境 页眉在页面顶部是一个29px的高条，两端各有29x29个按钮。在中间，右边的按钮是一个div（对于页面标题），我想要一个最小宽度300，但我也希望它用浏览器的宽度来扩展。 这里是一个陷阱：我希望这个标题div远离左边的按钮，留下一个最大宽度为200px的间隙。一旦达到最大宽
我的网站内容在页面上的加载比初始加载时预期的要慢 名称和其他内容出现在页面的中间，而不是顶部。 如果我抓住浏览器的一角，调整窗口的大小，甚至稍微调整一下，内容就会弹回到页面的顶部 我不确定是什么原因造成的 我在Mac桌面上的Chrome/Safari/FF上进行了测试 这种反应在平板电脑或智能手机上是正常的 页面位于 在第一次加载时注意，米迦勒的名字在页面的中间，但是如果你抓住下一个拐角并移动-所有东西都弹出到它应该是的顶部。 我知道还有很多关于响应式内容的帖子，我已经查看了20多篇，但是没有一
我对编程知之甚少，但我很高兴能将这些高级对象变得像处理HTML文档一样简单。无论如何，有一些基本的东西我想不出来，比如如何让一个部分滚动以适应嵌套的内容，比如一堆卡片 在一个完整的宽屏显示器中，“100年”选项卡上的所有8张卡都显示良好。但一旦你将窗口调整到更窄的位置，比如智能手机屏幕，你就会意识到你无法滚动，因此无法访问所有内容 如何为此启用滚动？核心动画页面元素是溢出：隐藏，所有可见元素都是该元素的子元素 如果将核心动画页面元素设置为overflow:auto，则它将可滚动
我已经在我的网站上的响应式重新设计中实现了JSSOR滑块。您可以查看它 起初，我在iPhone和iPad上遇到了滑块响应方向改变的问题。通过一些研究，我发现我必须添加一个orientationchange命令来修复它 在我完成这项工作后，我试着在Windows手机和Android手机上进行方位调整。重新调整大小在这两个设备上都不起作用 我认为resize命令应该会处理它 我认为问题所在的代码是： 鳞片滑翔机 if (!navigator.userAgent.match(/(iPh
我使用的是基金会的grid-x，它由CSS flexbox提供动力 是否有一种小而简单且直接的方法可以让响应瓷砖的行和列（每行瓷砖的数量未知）在每行之间有一个可视分隔符（例如，一个好的老式元素）？我正在使用基金会的class=“row”和class=“column”来渲染响应瓷砖 我试图实现的基本目标是：对Foundation的Css或标记进行最少的黑客攻击。我能想到的最简单的解决方案是拥有一个具有坚实底边的Css类： .solid-border-bottom{border-bottom: 0.
我们一直在讨论网页响应如何在消除网站移动版需求方面非常有效，但我们想知道；是的，在移动设备上查看的其他元素是隐藏的，这是否意味着浏览器只下载了所需的内容，或者是整个网页但隐藏了其他元素 问候,， Gafes响应式开发-如果操作正确-不应在不同的视口宽度之间显示或隐藏元素，标记中不应存在任何特定的重复或冗余，所有这些都是通过CSS从前端完成的，以根据当前视口宽度为这些HTML元素提供不同的外观 这就是说，标记本身不可避免地需要一些细微的更改和添加，以满足页面响应方面的需要—附加类名等，因此HTML
好的，我的布局由两个元素组成，一个导航（“左”）和实际的站点内容（“右”） 现在我想要的是“left”div保持原样，但是当将屏幕缩小到一定大小时，我希望content div的宽度也随之减小 然而，我不知道如何开始。当我查找响应式web设计时，我只能找到整个布局的骨架，其中包含大量的div和百分比，但我只想将其用于一个div，我完全困惑了 这就是我现在拥有的： .right { width: 750px; margin: 40px 0 40px 50px; float:
我正在开发一个以餐厅菜单为特色的网站。每种商品都有不同的尺寸，价格也不同。这在中型和大型设备上使用表格显示，每个价格都有一列： 在移动设备上，屏幕太窄，无法正确显示每个产品多达4种不同的尺寸 因此，我想将列折叠成行，每行以列名开头： 使用响应性设计是否有类似的可能性？我试图避免维护两个不同的HTML版本的内容，一个只在手机上可见，另一个只在大屏幕上可见 我使用基础5，所以我很理想地使用这个网格系统寻找解决方案，但是我对任何解决方案都很开放。 < p>解决方案涉及在移动设备上制作表格单元显示：
我的标题中有3个元素（A、B和C），其中A和C是静态图像，B是文本的流体div 当我缩小屏幕尺寸（或移动设备上的视图）时，我希望出现的情况是，B降到二者之下，而a和C保持不变——分别位于屏幕的两侧 请参见此图 谢谢没有看到你的代码，我无法100%确定你的CSS结构是什么，但是你可以从@媒体屏幕和（最小设备宽度：XXXpx）{}或@媒体屏幕和（最小宽度：XXXpx）{}开始。他们将检测设备屏幕大小，并为您提供一些有条件的CSS规则。在这些规则中，如果您的右/左div浮动，您可以浮动第三个div并
我试图让图像响应浏览器的大小，这样当浏览器变小时，图像就会响应，这样就不会涉及滚动。我在这里发现了一个类似的问题，但我无法使这个解决方案起作用。我错过了什么 下面是我的代码——我使用的是Wordpress，所以它会自动在我的图像周围添加一个“p”标记，将我的图像包装在一个段落中。另外，我不确定我是否为此目的包含了太多的代码，但我想确保它都在那里，以防在一个奇怪的地方发生错误，可能导致问题 这是我的html： <body> <div id="pop_up_page">
我需要一个视频播放器的响应布局的网站，这是使用引导开发。这意味着当我重新调整屏幕大小或在不同大小的屏幕中查看页面时，播放器应该自动适应屏幕 我试过使用jwplayer和flowplayer，但都不起作用 注意：播放器应该能够播放youtube视频 还有什么方法可以让jwplayer/flowplayer响应吗？你可以在你的网站上使用YouTube视频，并使用插件使其响应。我正在使用jQuery调整大小#holder是您放置电影的部门（#videocontainer）。 结构： <div
强制我的Spree应用程序/用户的浏览器忽略骨架宽度调整，并始终假定浏览器的宽度为960px，只是让用户向右滚动，这是否可能且容易 我已经创建并部署了一个基本的、功能齐全的电子商务应用程序。作为一个绝对的新手，我不知道响应式设计。因此，现在，我的站点在大视图下运行良好，但在宽度
我正在尝试创建一个响应导航工具栏（使用and）。我想创建一个导航栏，它可以折叠成一个响应性的垂直列表（类似于），这样在移动设备上显示一个汉堡菜单，通过单击汉堡图标可以显示和隐藏一个垂直列表 我已经创建了一个工具栏（），但是当我缩小显示尺寸以激活响应工具栏时，burger菜单不会展开以显示路由器链接。类似地，路由器链路没有激活（我怀疑锚标签被v-btn覆盖） HTML（哈巴狗） 编辑 已编辑代码以实现来自LShapz（）的建议 有人能建议我在点击汉堡菜单时显示/隐藏响应菜单吗 以前的代码笔 工作
我最近一直在研究响应式设计，有没有想过为什么不使用流程布局而不是960网格之类的东西？根据我的研究，960被选为最流行的显示器尺寸。但是在大屏幕或宽屏幕显示器上，仍然有大量的空白空间 我的想法是，媒体查询的最大大小不应该是100%的页面宽度吗？而不是960像素 有人能解释为什么这不是标准，或者为什么人们默认使用固定宽度进行响应性设计吗？如果你想使用大于960px的宽度，那么这是一个选项，因此你不需要重新发明轮子 Bootstrap3正在发布过程中，虽然网格类已经更改，但您仍然可以获得响应性的完整
我正在设计一个使用edge reflow的响应站点，其中包含以下断点规则：
我是一名SP开发人员，也擅长网络设计。我目前的任务是在SP 2013环境中实施响应性设计和品牌 现在，我可以选择在SP2013中使用哪一种来实施响应性设计，因此我收集了pro的和con的foreach技术 你觉得怎么样？有没有我遗漏的重要方面？还有其他更适合实现这一点的解决方案吗欢迎任何输入！：）设备频道 是的，我说的是设备频道，即使在问题中没有提到它们，因为它们可以为最终用户和客户端提供最佳性能和优化性-在我看来：） Pro 为每个设备单独设计的HTML/CSS和JS --不需要隐藏或删除不
我正在制作一个响应性网站，需要为客户的Facebook粉丝页面添加一个类似Facebook的框。有一个用于自定义的小部件，但它不允许您设置百分比宽度 我四处搜索，找到的最近的一个是2010年的，它指的是一个fb:fan小部件，允许你链接自定义CSS。我试图使本教程正常工作，但失败，出现以下错误： <fb:fan> requires one of the "id" or "name" attributes. 需要一个“id”或“name”属性。 所以，总而言之，我需要一个类似Fac
我的网站上有一些jquery鼠标悬停效果，我需要为触摸屏禁用这些效果，但是，我如何知道禁用jquery的屏幕宽度？目前我的速度还不到800像素。这适用于ipad肖像，但当我将其横向旋转时，JQuery再次被激活。我曾读到Ipad横向宽度为1024倍，但也可能是一个小型非触摸屏的大小。是否有一种方法可以指定某些设备的效果而不是屏幕宽度？要实现这一点，您应该考虑另一种方法，而不是禁用触摸设备的鼠标悬停事件，为非触摸设备添加事件 把你的工作添加到项目中（你可能已经把它放进去了）。添加后，您可以通过将“
我们希望为Dotnetnuke 7安装创建响应性皮肤 我们之前已经完成了这项工作，只需编写代码，使用winless编译代码并上传css 这工作正常，但最近创建了一个支持.less文件（使用uless）的umbraco站点，该过程更加顺利 我曾试图研究这一课题，但找不到比这更新的课题了 这是从2010年开始的，所以dnn的几个版本 有人在最近的版本中使用过类似的东西吗 如果是这样的话，升级后是否会中断 我甚至会考虑使用一个第三方模块，如果有一个，但我找不到一个< /P> < P>我们用DNN实现
我没有编写响应式web的经验，但我想在已经响应的wordpress主题中添加一段响应式内容 我想在一条线上做两个盒子，一个带adsense单元，另一个带post缩略图和按钮 这是可行的，但我想这不是完全干净的方式 <div style="width:100%;min-height:230px"> <div style="width:50%;float:left;min-width:230px"> adsense here </div> <div st
我想在不同的屏幕尺寸上更改横幅的高度，目前我正在使用下面的代码片段 /* Large Devices, Wide Screens */ @media only screen and (min-width : 1366px) { } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { } /* Small Devices, Tablets */ @media only screen and
我把一个容器分成两个不同颜色的col-md-6 假设一个是绿色的，另一个是黄色的 我正在尝试将这两列转换为一个col-xs-12，渐变颜色为绿色->黄色 杰德： 触笔： .container-six height: 150px background-color: white .row height:100% .col-xs-12 height 150px background: linear-gradient(to left,#ff8533,#99ccff) .c
请告诉我如何将旧的php网站www.cnc4milling.com转换为响应性网站。使用php和css的站点 非常感谢您的回复 致以最诚挚的问候没有通过工具或简单的技术来转换站点的事情 看到这个网站，你似乎只能重写你的HTML和CSS代码。尝试使用CSS Flexbox或Twitter的引导来实现响应。有比我所说的更多的方法，每种方法都有自己的好处。研究所有这些，以便更好地了解您的需求 祝你好运 有两种方法：要么雇个人做，要么自己做。如果你最终自己做了这件事，当你陷入困境时，请随意问一个特定的问
道歉如果以前有人问过，我发现类似的问题，但不完全是我想要的 我发现了各种在线工具来嵌入响应性很强的Youtube视频，但这样做会使它们在桌面上变得巨大（我认为它设置为100%，并占据整个屏幕） 我在这里找到了一段显然可以解决这个问题的代码，但我不确定该代码在哪里适合我目前所拥有的（我是一个完全的代码新手） 有人能帮我提供我需要的全部代码吗（我只能访问HTML），这样我就可以直接插入youtube链接了？） 提前谢谢 您可以使用CSS中提到的min和max宽度和高度使YouTube嵌入响应。您可以
container默认情况下，将内容放在中间（边距在侧面），而不是填满整个屏幕 这背后的理由是什么 @media (min-width: 768px) { .container { max-width: 750px; } } @media (min-width: 992px) { .container { max-width: 970px; } } @media (min-width: 1200px) { .container { max-widt
我想在桌面设备上设置一个网格，每行3张w-50卡，在较小的设备上每行一张卡 但是，如果用户响应性地缩小浏览器窗口，我希望卡片在桌面上保持相同的宽度，并使它们之间的空间变小，而不是卡片本身变窄 此外，是否可以在桌面上使用w-50卡，但在较小的设备上使用w-75卡 示例代码： <div class="row"> <div class="col-sm-12 col-lg-4 " > <div class="card w-50 "> <