小编Ale*_*lex的帖子
垂直居中引导角模态窗口
无论显示内容的大小如何，我如何都可以将该模式窗口垂直居中。在我的页面中，我将图像显示为模式窗口，并且希望将其显示在屏幕中央。我可以水平对齐，但不能使其垂直协作。有什么想法/例子吗？
我在页面中遵循以下示例：模态窗口演示插件
但模态窗口的实际内容如下所示：
<script type="text/ng-template" id="myModalContent.html">
<div>
<img class= "attachmentImage" src={{items}} />
</div>
</script>
我应该寻找使的变化bootstrap.min.css或者ui-bootstrap-tpls-0.13.0.js或者是在我自己的表与我的风格接近这一目标的最佳途径。
非常感谢您的宝贵时间。如果您需要更多信息或不清楚，请告诉我。
css twitter-bootstrap angularjs bootstrap-modal angular-bootstrap
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
将<Header>设置为Other Elements - CSS
我有一些HTML,当有东西加载时,我有一个<div>显示加载,当它正在加载当前加载出现在所有的一切,但我希望标题在加载屏幕上方.这是HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="loading">
<div id="loading-container">
<h1 id="loading_text">Loading...</h1>
</div>
</div>
<header>
<a id="logo" href="user_profile.html">
<h1 id="name">Name</h1>
<h2 id="hello">Hello</h2>
</a>
<nav>
<ul>
<li><a href="user_profile.html">Profile</a></li>
<li><a href="user_info.html" class="selected">Info</a></li>
<li><a href="user_specials.html">Specials</a></li>
<li><a href="user_social.html">Social</a></li>
</ul>
</nav>
</header>
</body>
</html>
这是css
header {
float:left;
margin:0 0 30px 0;
padding:5px 0 0 0;
width:100%;
z-index: 102;
}
#logo {
text-align:center;
margin:0;
}
h1 {
font-family:'Nunito', 'sans-serif';
margin: 15px 0;
font-size:1.75em;
font-weight:normal;
line-height:0.8em;
}
h2 { …推荐指数
解决办法
查看次数
媒体查询字体大小不起作用
我搜索过,但没有发现任何类似于我的问题.
#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background: url(../images/bg.jpg) repeat top left;
z-index: 9999;
}
#navigation a {
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
color: #F2B704;
text-decoration: none;
}
#navigation a:hover {
color: #D78E02;
}
@media only screen and (max-device-width: 480px) {
#navigation a {
font-size: 10px;
}
}<div id="navigation">
<a …推荐指数
解决办法
查看次数
光滑滑块"位置:固定"
我正在使用slick.js并尝试将滑块放在页面底部.
我正在使用,position:fixed但它只是打破滑块,这意味着每一个动作都会导致每个细胞生长,我认为它的大小加倍.
这有解决方法吗？
这是我的代码:
<div class="cappa__holder">
<div class="cappa">111</div>
<div class="cappa">222</div>
<div class="cappa">333</div>
<div class="cappa">444</div>
<div class="cappa">555</div>
<div class="cappa">666</div>
<div class="cappa">777</div>
</div>
.cappa__holder {
/* uncomment next line to see it break */
//position: fixed;
bottom: 0;
}
.cappa {
text-align: center;
background:#f1f1f1;
margin: 4px;
border: 1px solid blue;
}
$(document).ready(function(){
$('.cappa__holder').slick({
infinite: true,
arrows: true,
slidesToShow: 4,
slidesToScroll: 4,
speed: 600
});
});
推荐指数
解决办法
查看次数
Bootstrap 下拉列表位于导航栏下方
这是下拉菜单出现时的样子。
导航栏：
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Categories</a>
...
落下：
<ul class="dropdown-menu">
<li>
<div class="panel panel-default">
<div class="panel-body">
<div class="panel-info">
<p><strong>Black Dress</strong></p>
<p>Each Price : <strong>Rs. 500.00</strong></p>
<p>Quantity : <input type="number" value="3"/>
<a href="#"><span class="glyphicon glyphicon-refresh"></span></p>
....
尝试定位（position:relative）。但无法获得所需的结果。（下拉nav-bar）。提前致谢。
这是我工作的一个例子。
推荐指数
解决办法
查看次数
网页中的重音符号不起作用
你好
我正在构建的网站有问题。问题是它是西班牙语的，并且在元音中使用了一些重音。问题是重音符号显示不正确。我上传一张图片来显示问题。我使用的是 Myriad Pro 字体，但我已经尝试过其他一些在正常文本编辑中根本不会出现问题的字体，例如 Helvetica。
这是显示问题以及与之相关的代码的图像。
推荐指数
解决办法
查看次数
输入内部的响应式图标
这是Treehouse作者的一些代码，显示了如何在输入中放置图标。
HTML：
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term">
</div>
CSS：
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body {
margin: 30px;
}
.search {
position: relative;
color: #aaa;
font-size: 16px;
}
.search input {
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input {
text-indent: 32px;
}
.search .fa-search {
position: absolute;
top: 10px;
left: 10px;
}
证明它的笔：http : //codepen.io/jamesbarnett/pen/aBnbL#0
您如何将图标放在输入的末尾，并使其对屏幕的变化做出响应？
我尝试使用折线定位该图标，但是它根本不起作用。这是我的尝试的小提琴：
推荐指数
解决办法
查看次数
谷歌iframe'在底部引起额外的填充
我有以下HTML代码:
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d109782.8671228349!2d76.62734023564995!3d30.69830520749905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390fee906da6f81f%3A0x512998f16ce508d8!2sSahibzada+Ajit+Singh+Nagar%2C+Punjab!5e0!3m2!1sen!2sin!4v1449838222081"
width="100%" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
现在我有以下CSS:
body {
color: #fff;
}
.google-maps {
margin: 1em 0;
background: #000;
padding: .5em;
}
我已经彻底浏览了HTML和CSS,但我无法弄清楚是什么导致底部的额外填充尽管偶数填充我给了IE
padding: .5em;
有人可以解释为什么我会得到这种不均匀的填充？
推荐指数
解决办法
查看次数
css - 如何显示100px的图像
我需要只显示100px的height图像,但它不能正常工作.我不想破坏图像.只需显示100px的图像.
.image-news
{
position: relative;
width: 100%;
height: 100px;
margin: 0 auto;
}
.image-news img
{
width: 100%;
height: 100px;
cursor: pointer;
background-size: cover;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap-grid.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-sm-12 col-md-6 no-padding">
<div class="image-news">
<img src="http://blog.emania.com.br/content/uploads/2015/12/paisagem-tropical-wallpaper-1.jpg"/>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 no-padding content-news">
<a href="#" target="_blank">
<div class="title">
<span>Title</span>
</div>
</a>
<div class="content">
<span>Content</span>
</div>
</div>推荐指数
解决办法
查看次数
jQuery - 找到html输入数组的选择器
我很难找到这些元素的jQuery选择器:
<input name="products[5][quantity]">
<input name="products[5][price]">
<input name="products[13][quantity]">
<input name="products[13][price]">
我需要找到所有产品(价格和数量乘以它们)并总结(它的价格是购物车),如sum_of_all_products(价格*数量= price_for_one_product)
我看了手册https://api.jquery.com/category/selectors/,但这需要更多的技巧.
有人能给我一些线索吗？
推荐指数
解决办法
查看次数
在悬停时显示,但仅在悬停项目上显示
我正在尝试使这项工作:
HTML:
<div>
<p> Lorem Ipsum</p>
</div>
<div>
<p> Lorem Ipsum</p>
</div>
<div>
<p> Lorem Ipsum</p>
</div>
CSS:
div
{
p
{
display:none;
}
}
div:hover
{
p
{
display:block;
}
}
功能: 当我将鼠标悬停在div上时,我需要在其中看到一个段落.但问题是,当我悬停一个div时,文本在所有div中同时可见.有没有办法只在一个悬停的div上有可见的段落？
首选: 没有JavaScript或JQuery.只有CSS.
谢谢.
推荐指数
解决办法
查看次数
标签 统计
css ×11
html ×8
css3 ×2
javascript ×2
jquery ×2
angularjs ×1
css-shapes ×1
diacritics ×1
hover ×1
html5 ×1
iframe ×1
media ×1
navbar ×1
slick.js ×1