- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是我的 HTML:
<div class="row trolibelanja">
<div class="col-md-3">
<img src="http://2.bp.blogspot.com/-WGiyrP7xGOk/VQlHwjgporI/AAAAAAAABHI/zLGXTH0-H2w/s1600/Mie%2BAyam%2B(4).jpg" class="detailfoto">
</div>
<div class="col-md-4">
<p class="detailnama">Mie Ayam Bakso</p>
<p class="detailtoko">Toko Bu Lastri</p>
</div>
<div class="col-md-2">
<p class="detailharga">Rp. 30.000</p>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-btn">
<button class="btnjumlah" type="button">-</button>
</span>
<input type="text" class="form-control jumlah" value="1">
<span class="input-group-btn">
<button class="btnjumlah" type="button">+</button>
</span>
</div>
</div>
<div class="col-md-1">
</div>
</div>
这是我的CSS:
body{
background-color: #661f61 !important;
font-family: 'Saira Extra Condensed', sans-serif !important;
}
.container-fluid.keranjang {
background-color: #e9e9e9;
flex: 1;
}
.container.keranjang {
}
.row.trolibelanja {
background-color: #e1e1e1;
position: relative;
padding-top: 10px;
padding-bottom: 23px;
}
.row.trolibelanja:after{
background-image: -webkit-linear-gradient(135deg, #6e1c64 25%, #e27f31 25%) !important;
position: absolute;
content: " ";
width: 100%;
height: 15px;
bottom: 0;
}
.detailfoto {
width: 100%;
height: 110px;
border: 6px solid white;
}
.detailnama{
font-size: 20px;
font-weight: bold;
}
.detailtoko{
line-height: 20px;
margin: -17px 0px;
}
.detailharga{
font-size: 20px;
font-weight: bold;
text-align: center;
}
.input-group .jumlah {
width: 50%;
text-align: center;
}
.input-group .btnjumlah {
background-color: #e27f31;
color: white;
border: 0;
font-size: 20px;
font-weight: bold;
padding: 0px 10px;
height: 100%;
}
我正在尝试使用 Bootstrap 将文本和表单放在照片旁边,如下图所示:
我的代码结果:
请让我知道我错过了什么?我尝试了我知道的每种显示组合,但它们不起作用。谢谢
最佳答案
正确排列您的列。你会好起来的。将图像放在一列中(在本例中为 col-md-3
),将其余内容放在另一列中(col-md-9
),然后将所有其余内容放入新行中的内容。我建议您更好地了解 bootstrap 网站上的行和列。
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
<div class="row trolibelanja">
<div class="col-md-3">
<img src="http://2.bp.blogspot.com/-WGiyrP7xGOk/VQlHwjgporI/AAAAAAAABHI/zLGXTH0-H2w/s1600/Mie%2BAyam%2B(4).jpg" class="detailfoto">
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<p class="detailnama">Mie Ayam Bakso</p>
<p class="detailtoko">Toko Bu Lastri</p>
</div>
<div class="col-md-2">
<p class="detailharga">Rp. 30.000</p>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-btn">
<button class="btnjumlah" type="button">-</button>
</span>
<input type="text" class="form-control jumlah" value="1">
<span class="input-group-btn">
<button class="btnjumlah" type="button">+</button>
</span>
</div>
</div>
</div>
</div>
</div>
关于html - 使用 Bootstrap 将文本和表单放在照片旁边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47656003/
我当前项目中的许多类都有几个只能从类本身内部调用的属性和方法。此外,根据类(class)的当前状态,它们可能会扰乱类(class)的工作。 目前,所有这些接口(interface)都在 .h 文件的主
我想使用ngbTabSet将nav-pills in card-header 和tab-content in card-body。但我不知道该怎么做。 这是我尝试实现的示例(使用 bootstrap.
我正在浏览文档以查找如何允许放置在停靠栏图标上。据我所知,建议您使用 LSItemContentTypes,因为 CFBundleTypeOSTypes 已弃用。但是,我无法让 LSItemConte
我正在尝试在书签中使用 jquery UI 作为 slider 。并且 jquery ui 要求在普通 jquery 文件之后包含该文件。 所以到目前为止我所尝试的只是将脚本附加到 header ,同
您好,我尝试了广泛的谷歌搜索,但似乎没有任何帮助。 这是我的场景: 公司 Logo 存储在外部域/网址(矩形)中。 带有谷歌地图的 Ionic 应用程序,将这些 Logo 作为标记放置在 map 上。
我今天在阅读我的一些 C# 代码时发现了这一行: if (ProgenyList.ItemContainerGenerator.Status != System.Windows.Controls.Pr
我刚遇到this question在 Go FAQ 中,它让我想起了困扰我一段时间的事情。不幸的是,我真的不明白答案是什么。 似乎几乎所有非 C 类语言都将类型放在变量名之后,如下所示: var :
这是有效的 HTML 吗? 最佳答案 作为元素可以包含 phrasing content ,以及属于该组,则有效。 从语义上(并且具有一些常识),如果唯一的内容是 , 不;如果它同时包含文本和图像
这是有效的 HTML 吗? 最佳答案 作为元素可以包含 phrasing content ,以及属于该组,则有效。 从语义上(并且具有一些常识),如果唯一的内容是 , 不;如果它同时包含文本和图像
我有两本 T.Parr 写的关于 ANTLR 的书,我到处都看到美元符号和符号的引用。它也对我有用: term : IDENT -> { new TokenNode($IDENT) }; 或更复杂的东
我在实现段控制时遇到了一些问题。因为我希望它是一个固定的标题,所以当我滚动时我总是可以看到它,我已经在 - (UIView *)tableView:(UITableView *)tableView v
我有一个 20x36px (10x18pt) 的箭头图像,当我选择一个 UIImageView 时,将它拖到我的 View Controller 上然后设置图像,它总是模糊的。我只在我的项目中包含 @
How can I put background image when I hover a link Insert Bg in this a when hov
我需要在我的 .container 中添加(最新的第一个)新分区,但在 .controls (按钮)之后。可能吗? 注意:添加新的分区来保存按钮下方的前置控件对我来说不是一个选择。 HTML 需要保持
我是一名优秀的程序员,十分优秀!