当屏幕尺寸变小时,我试图将我的按钮对齐到移动屏幕的中心,尝试将文本对齐设置为居中,但这似乎不起作用。
它一定是我试图覆盖的左拉/右文本 Bootstrap 类的东西,只是不太确定我错过了什么。
CSS:
@media screen and (max-width: 998px) {
@font-face{
font-family: 'Gotham';
src: url("assets/fonts/Gotham-Bold.otf");
src: url("assets/fonts/Gotham-Light.otf");
}
@font-face {
font-family: "Gotham-Bold";
src: url("assets/fonts/Gotham-Bold.otf");
font-weight: Bold;
}
@font-face {
font-family: "Gotham-Light";
src: url("assets/fonts/Gotham-Light.otf");
font-weight: Light;
}
.col-md-4.pull-left.text-right{
position: relative;
text-align: center;
}
.
.
.
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 pull-right text-left" >
<div class="IMGpadding"></div><br>
<img style="float:left" class="img-responsive" src = "assets/images/white-leaf-bg.jpg" id="frame"/>
</div>
<div class="col-md-4 pull-left text-right" >
<div class="h1padding"></div>
<a style="float:right" class = "h1" href="" id="introID"><b>INTRO</b></a>
<div class="h1padding"></div>
<a style="float:right" class = "h1" href="" id="OnSuerfaceID"><b>ON THE</b> <span class="light">SURFACE</span></a>
<div class="h1padding"></div>
<a style="float:right" href="" id="FromOilID"><b>FROM</b> <span class="light">ORE TO OIL</span></a>
<div class="h1padding"></div>
<a style="float:right" href="" id="EnvImpactID"><b>ENVIRONMENTAL</b> <span class="light">CARE</span></a>
<div class="h1padding"></div>
<a style="float:right" class = "h1" href="" id="MoreThanGasID"><b>MUCH MORE THAN</b> <span class="light">GASOLINE</span></a>
<div class="h1padding"></div>
<a style="float:right" class = "h1" href="" id="OneMoreID"><b>ONE MORE</b> <span class="light">THING</span></a>
</div>
</div>
</div>
提前致谢,我仍然是 Bootstrap 的菜鸟。
最佳答案
这也取决于您的其他页面。根据您的要求和此处添加的代码,我在 codepen 中添加了一个工作副本。尝试这个:
@media screen and (max-width: 998px) {
@font-face{
font-family: 'Gotham';
src: url("assets/fonts/Gotham-Bold.otf");
src: url("assets/fonts/Gotham-Light.otf");
}
@font-face {
font-family: "Gotham-Bold";
src: url("assets/fonts/Gotham-Bold.otf");
font-weight: Bold;
}
@font-face {
font-family: "Gotham-Light";
src: url("assets/fonts/Gotham-Light.otf");
font-weight: Light;
}
.col-sm-4.pull-left.text-right{
position: relative;
text-align: right;
width:50%;
text-align:right;
}
.h1padding {
margin-bottom:100px;
}
}
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 pull-right text-left" >
<div class="IMGpadding"></div><br>
<img style="float:left" class="img-responsive" src = "assets/images/white-leaf-bg.jpg" id="frame"/>
</div>
<div class="col-sm-4 pull-left text-right" >
<div class="h1padding"></div>
<a class = "h1" href="" id="introID"><b>INTRO</b></a>
<div class="h1padding"></div>
<a class = "h1" href="" id="OnSuerfaceID"><b>ON THE</b> <span class="light">SURFACE</span></a>
<div class="h1padding"></div>
<a href="" id="FromOilID"><b>FROM</b> <span class="light">ORE TO OIL</span></a>
<div class="h1padding"></div>
<a href="" id="EnvImpactID"><b>ENVIRONMENTAL</b> <span class="light">CARE</span></a>
<div class="h1padding"></div>
<a class = "h1" href="" id="MoreThanGasID"><b>MUCH MORE THAN</b> <span class="light">GASOLINE</span></a>
<div class="h1padding"></div>
<a class = "h1" href="" id="OneMoreID"><b>ONE MORE</b> <span class="light">THING</span></a>
</div>
</div>
</div>
关于html - 对齐按钮中心小屏幕 Bootstrap ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46595095/