css 内联块和引导网格系统输出

2024-01-08

我正在尝试有一个具体的HTML我的 div 的标记使用css and bootstrap 3.2。下图展示了我想要得到的结果。

我使用了引导网格系统,以便我的页面能够响应并在小屏幕设备中正确显示。这是我尝试过的代码。我用过http://www.bootply.com http://www.bootply.com来测试它。

有什么想法如何获得标记吗?

<div>
  <div style="display:inline-block; border:1px solid gray; width:150px; height:150px;">
    <img src='' alt="image go here !"/>
  </div>

  <div class="container-fluid" style="display:inline-block;">
    <div class="row" style="border:1px solid gray;">
      <div class="col-md-9">This is the product name</div>
      <div class="col-md-3 text-right">1 230.99</div>
    </div>

    <div class="row" style="display:inline-block; border:1px solid gray;">
      <div class="col-md-6">Property 1</div>
      <div class="col-md-6">Property 2</div>
    </div>
  </div>
</div>

The desired result : The desired result

EDIT : The result I get : The result I get


我已经为你创建了一个 Bootply。 http://www.bootply.com/Vrv30ejxyT

<div class="container">
    <div class="row">

        <div class="col-md-3">
            <div class="img">
                <img src="">
            </div>
        </div>

        <div class="col-md-9">
            <div class="row">
            <div class="col-md-8">
              This is the product name
            </div>
            <div class="col-md-4">
              1 230.99
            </div>
            </div>

            <div class="row">
            <div class="col-md-6">
              Property 1
            </div>
            <div class="col-md-6">
              Property 2
            </div>
            </div>
        </div>

    </div>
 </div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css 内联块和引导网格系统输出 的相关文章

  • 如何使用 :nth-child() 选择所有子项中的所有其他

    我正在开发一个评论系统 我需要拥有其他所有孩子 div 甚至是第一个孩子的孩子 用 CSS 选择 例如 假设我有这个标记 为了简单起见 省略了不需要的结束标签 div class comment div class comment div
  • 鼠标移动时画布拖动

    我正在尝试构建一个可以使用鼠标移动拖动的画布 我做了一些我无法理解的错误 因为一开始似乎有效 然后出现了一个增量错误 使画布移动得太快 考虑以下代码 window onload function var canvas document ge
  • 如何在 Windows 网络中的 Intranet Web 应用程序中获取用户的用户名

    我内部有一个简单的 HTML 页面 它只显示一个表单并要求用户填写 我想自动捕获Windows域用户名和机器名 并将其与表单中收集的数据一起提交 我可以在客户端这样做吗 HTML JavaScript 或者我被迫在服务器端执行此操作 我还不
  • 平均分配固定大小容器的空间。 Flexbox 的案例?

    如何设计 HTML CSS 结构 将固定大小的容器水平分成三部分 第一部分的高度应与其内容需求一样高 第二部分和第三部分将共享剩余的空间五五十 无论它们的内容如何 如果其内容的大小超过此限制 则该部分应该是可滚动的 它的 HTML 部分很简
  • 无需重定向的 HTML 页面提交

    有没有什么方法可以在不使用ajax的情况下提交html表单而无需从当前页面重定向 你可以设置一个target 为您form 这样您就可以将表单提交到新选项卡 target blank 或一个小的 隐藏的iframe target nameo
  • 保证金如何运作?

    我在下面提供了marginfix这是一个块级元素并且one and two也是块级的 但它们是浮动的 这就是为什么它们位于同一行布局的原因 但是marginfix也不浮动 块级元素应位于该元素下方 如下所示
  • 为什么内部 DIV 会溢出到外部 DIV 之外?

    我已经远离 HTML 和 CSS 很久了 找不到这个简单问题的解决方案 我有一个 div 位于另一个 div 中 外层黑色 内层橙色 我的 HTML 和 CSS 是 outer position fixed width 30 height
  • 如何使用 Spring Boot 传输音频

    我想让用户能够播放声音 我的实现在 Firefox 上运行良好 在 Safari 上 不播放声音 我验证了音频控制可以在 Safari 中与其他网站一起使用 所以 我认为我必须更改控制器中的某些内容 控制器 RequestMapping v
  • 如何使用 github 托管外部 CSS 文件?

    我将 css 上传到 github 然后转到网站上的文件并单击 raw 选项 我尝试将其添加到网页中 但 chrome 给出以下错误 资源解释为样式表 但使用 MIME 类型 text plain 进行传输 https raw github
  • 如何使用 HTML 和 CSS 在我的网站上显示社交图标?

    我拼命尝试向我的网站添加一些图标 但无法让它们正确显示 我想要的只是一个包含图像并在线显示它们的容器 然后我想在该容器和图像之间添加一些填充 仅此而已 看这里我的方法 如果有人可以帮助我并纠正我的代码 使其真正有效 我会非常高兴 在我的 H
  • Bootstrap Grid System 新线看起来不太好

    最近 我开始在我的网站上制作一个管理页面来编辑多个小表 1 5 个条目 它们全部显示在一页上 并且表格嵌套在 div 中 如下所示 div class row div class col xs 12 col sm 4 col md 4 di
  • 如何将焦点设置在 BootStrap 中的第一个输入字段上? [复制]

    这个问题在这里已经有答案了 可能的重复 如何将焦点设置到独立于 id 的 HTML 表单中的第一个输入元素 https stackoverflow com questions 277544 how to set the focus to t
  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome
  • CSS以两种颜色显示一个字符[重复]

    这个问题在这里已经有答案了 css中是否可以用两种颜色制作单个字符 我的意思是例如字符 B 上半部分为红色 下半部分为蓝色 h1 font size 72px background webkit linear gradient red 49
  • 如果超过高度则动态浮动柱

    I ve got a questing concerning a dynamic floating layout of li s in a ul Container 灰色容器 ul 固定高度为 150px 所有 li 其中的应使用最大高度
  • 浮动CSS属性导致父div不继承高度?

    我在 div 中有一个元素设置为float right但是 它会导致最外面的 div 不环绕 这是jsfiddle http jsfiddle net W792X 5 for it 我试图让提交按钮在 div 内浮动 但设置该属性似乎会导致
  • 粘性背景图像/使用 CSS

    我目前正在创建我的第一个网站 并且即将完成 我在标题下为主体使用背景图像 我发现每个页面都有一个问题 因为它们的高度都不同 这使得我背景图像的当前设置放大图片以适合整个页面 我想做的是将背景图像设置为 粘性 我的想法是 背景图像将直接位于标
  • 如何计算一行中Flexbox项目的数量?

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据
  • 如何使用 Django (Python) 登录表单?

    我在 Django 中构建了一个登录表单 现在我遇到了路由问题 当我选择登录按钮时 表单不会发送正确的遮阳篷 我认为前端的表单无法从 查看 py 文件 所以它不会发送任何 awnser 并且登录过程无法工作 该表单是一个简单的静态 html
  • Radiobutton-带有纯 html/css 的按钮

    是否可以创建像这样的单选按钮JQuery http jqueryui com demos button radio那些 用纯html css thanks 试试这个小提琴 http jsfiddle net mcXm7 1 http jsf

随机推荐

  • 在 gnu Makefile 中组合多个 ifeq 和 ifneq

    如果语法如下 如何添加多个选择 ifeq VAR1 some string 结合 ifneq VAR2 some other string 结合更多 有单线吗 像 幻想代码 ifeq VAR1 some string and not VAR
  • Sphinx 文档模块属性

    我有一个模块应该有 property 我通过设置一个类作为模块解决了这个问题 我从这个答案中得到了这个想法 惰性模块变量 可以做到吗 https stackoverflow com questions 1462986 lazy module
  • SQL Server 2012 中的 128 位 Int?

    我正在寻找在 SQL Server 中实现 128 位无符号整数的最佳方法 主要要求是它must支持所有 128 位的按位运算 理论上这在 64 位机器上可能吗 我离题了 我已经阅读了一些通过 CLR 程序集使用 C 和用户定义类型的实现
  • SQL INNER JOIN 与带有 WHERE 的 LEFT JOIN

    我试图更直观地掌握 SQL 连接 例如 学习如何将 RIGHT JOIN 重写为 LEFT JOIN 通过翻转表的顺序 帮助我更好地理解这两个连接的工作方式 然而 现在我想知道是否可以将 INNER JOIN 重写为带有 WHERE 条件的
  • 如何在 Django 中按类别过滤产品?

    我正在尝试根据类别进行过滤 但它在每个类别页面上显示所有产品 但我想根据类别页面进行过滤 请检查我的代码并让我知道如何做到这一点 这是我的models py file class SubCategory models Model subca
  • 使用 CSS 将图像在屏幕上居中 - 随机屏幕/图像尺寸

    我必须创建一个网页 出于此问题的目的 该网页是在屏幕中心垂直和水平居中的单个图像 它有以下要求 客户端屏幕尺寸未知 移动端 该图像是用户定义的 因此尺寸未知 图像必须在所有设备上完全垂直和水平居中 图像居中必须在屏幕旋转过程中保持不变 即从
  • 在 Emberjs / Ember-cli 中禁用/关闭 LiveReload 服务器

    我使用 Cloud9 IDE 它仅公开端口 80 并阻止 LiveReload 连接 我收到此错误 GET https myapp c9 io 35729 livereload js snipver 1 https myapp c9 io
  • 从时间戳中提取时间

    我正在尝试从 ISO8601 时间戳中提取时间部分 例如从以下时间戳开始 0001 01 01T17 45 33 我想提取这部分 17 45 33 你有几个选择 假设您将它放在一个名为的变量字符数组中string 现在 如果您知道时间始终位
  • Rails 缓存的默认过期时间是多少?

    我已经做了一些谷歌搜索 但找不到这个问题的答案 Rails 允许为其缓存指定过期时间 如下所示 Rails cache fetch my var expires in gt 10 seconds 但是如果我什么都不指定会发生什么 Rails
  • 处理对话框流中的音频播放完成回调(媒体响应)

    我正在通过播放来处理意图MediaObject 我想创建一个意图处理程序来捕获媒体播放完成的回调 文档 https developers google com actions assistant responses media respon
  • 正则表达式部分隐藏电子邮件? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我想要实现
  • 本地化 JFileChooser“所有文件”字符串

    我正在使用 JFileChooser 开发一个 java 应用程序 用户可以切换语言 Locale setDefault Locale ENGLISH JFileChooser chooser new JFileChooser choose
  • 动态更改 ASP.Net 中的用户控件

    我正在尝试创建一个网页 该网页将根据下拉列表的选定值显示适当的用户控件 基本上页面布局是这样的 下拉选择 lt 基于下拉选择创建的用户控件 gt 我已经一半工作了 当选择改变时 控件也会改变 在 OnInit 中 我动态创建最后选定的控件
  • 过滤 Pandas 数据帧而不删除行

    我正在尝试使用where在我的 Pandas DataFrame 上替换所有不符合我的标准的单元格NaN 但是 我希望以始终保留原始 DataFrame 的形状的方式进行操作 并且不会从生成的 DataFrame 中删除任何行 给定以下数据
  • 如何将qml文件重新加载到QQuickView

    将 qml 文件重新加载到 QQuickView 的正确方法是什么 我正在使用 Qt Quick 2 1 并尝试编写一个简单的程序来加载 qml 文件并显示它 目前 我正在通过创建 QQuickView 来完成此操作 当我想重新加载 qml
  • 读一剪!在序言中

    我正在阅读同时阅读 Bratko 的 人工智能 Prolog 编程 第 5 章 控制回溯 起初 剪切似乎是模仿其他编程语言中已知的 if else 子句的直接方法 例如 Find the largest number max X Y Y X
  • android:如何在我的应用程序中实现像 Go Launcher 这样的首次教程?

    Go Launcher 有一个很好的初次使用教程 它与 Stock ICS 首次运行非常相似 我想学习如何在第一次启动我的应用程序时显示类似的教程 如何在我的 Android 应用程序中实现这个透明视图 与屏幕对象交互 我试图做相似的东西
  • 如何创建根据另一列计算的列?

    我需要创建一个专栏age在 SQL Server 数据库中 该列的值应根据该列的值计算DOB 它的值也应该增加Age增加 您应该使用计算列来解决此问题 其定义与此类似 ALTER TABLE Customers ADD Age AS dat
  • 如何让div换行

    我是CSS初学者 我想像这样将新的 div 放入新行中 我尝试这样的代码 div div
  • css 内联块和引导网格系统输出

    我正在尝试有一个具体的HTML我的 div 的标记使用css and bootstrap 3 2 下图展示了我想要得到的结果 我使用了引导网格系统 以便我的页面能够响应并在小屏幕设备中正确显示 这是我尝试过的代码 我用过http www b