我尝试使用Bootstrap visible和hidden类来创建仅在移动/桌面上可见的内容.我注意到这些类没有正常工作(我注意到很多人都遇到了这个问题并以这种方式解决了)所以我创建了一个移动样式表来设置要在移动设备上显示哪些div.
这是我目前的代码:
<div class="containerdiv hidden-sm hidden-xs visible-md visible-lg">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">
</div>
</div>
</div>
<div class="mobile">
test
</div>
现在.mobile应该可以在移动屏幕上看到,900px宽度和更小.我使用Bootstrap类作为另一个div,.containerdiv并且到目前为止工作,但只有当我hidden-xs在我自己的移动CSS表中添加一个值时,就像这样;
.hidden-xs {
display:none !important;
}
.mobile {
display:block !important;
}
该.mobileDIV应该会显示在屏幕上900px或更小,但它仍然没有.我不确定为什么它没有,display:block是正确的用法吗？添加visible-xs并且visible-sm什么都不做.
这样做的正确方法是什么,为什么我的版本不起作用？
我正在用html制作电子邮件模板,它在苹果电子邮件客户端,gmail,hotmail和windows mail 2006中运行良好.它在outlook中不起作用,它延伸出来,字体系列不起作用,因为它延伸了它不以页面为中心.
这是我的代码;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=0.5">
<meta name="format-detection" content="telephone=yes">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 100% !important;
overflow-y: hidden;
background-color: #ffffff;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family: Helvetica;
vertical-align: top;
border-spacing: 0px;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 0px;
padding-left: 0px;
}
a img …我正在使用引导网格来构建布局.在这个布局中,我有一个页面,显示问题和答案作为常见问题解答.我创建了一行,每列有4列,每行4列.我在其中添加了包含问题和答案的段落.现在我有13个这样的段落和一个包含徽标和两个标题的标题div.
目前我正在使用div上的最大高度和填充来尝试均匀地分隔它们但是它并不是随处可见而我只是想知道是否有更方便的方法来划分这些段落,因为我认为这是更多的东西人们想做.
所以这是我目前的HTML;
<div class="row faq">
<div class="col-lg-4 lefttop">
<div class="faqtitle">
</div></div>
</div>
这是我目前的CSS;
.faqcontainer {
margin-right:4%;
margin-top:2%;
}
.faq {
text-align: center;
font-size:18px;
}
.faq h3 {
font-size:22px;
padding-bottom:0px;
margin-bottom:0px;
font-weight:500;
}
.faq h1 {
margin-top:0px;
padding-top:0px;
font-size:50px;
color:#ee7d2f;
}
.faq p {
max-width:450px;
min-height:130px;
margin:0px auto;
text-align:left;
font-size:15px;
padding-top:30px;
}
.faq a {
color:#598edf;
background: none !important;
}
.faqtitle {
margin-top:0px;
padding-top:0px;
}
.faqtitle h2, h1 {
margin:0px;
padding:0px;
}
.numbers {
font-size:40px;
color:#598edf;
float:left;
padding-bottom:0px;
padding-right:6px;
font-weight:200; …我在我的wordpress网站上添加了一个搜索框,但由于wordpress中有很多默认样式,我似乎无法设置机器人框和提交按钮对齐.
目前提交按钮比我的搜索框略高,但我没有为我的按钮指定任何边距或填充.
该网站在线; http://sennheiser-apart.com
这些是我目前在我孩子主题的css文件中搜索内容的css行.
button {
border:none;
padding:6px;
}
input {
height:28px;
border:none;
}
input[type="submit"]{
border:none;
background-color:#00AFDD;
height:28px;
color:#fff;
font-size:18px;
margin:0px;
}
input[type="submit"]:hover{
background-color:#ADAFB2;
}
即使在我的页面上搜索并在wordpress使用的其他文件中寻找一系列样式也无济于事,我只是找不到导致这种情况的原因.有人有线索吗？我怎样才能解决这个问题？