需要帮助使网站响应#2 [英] need help making website responsive #2

问题描述

大家！我目前正在为我的一个朋友做一些免费工作，为我的投资组合做出贡献并让我继续学习.

一切都很顺利，看起来也很棒，但不幸的是，我在尝试使某些内容具有响应性时遇到了很多麻烦.我正在使用 Bootstrap 网格框架.

好的，这是我的 CSS

.footertext {字体系列:'氧气'，无衬线；字体粗细:100；字体大小:15px；白颜色;左边距:30px；不透明度:0.5；文本对齐:右；}.lastbox {字体系列:'氧气'，无衬线；字体粗细:100；字体大小:19px；文本对齐:居中；}.页脚{背景尺寸:封面；高度:105px；box-shadow: 插入 0 0 0 1000px rgba(0,0,0,.5);边距顶部:100px；填充顶部:20px；填充底部:20px；}.boxmain {背景颜色:白色；宽度:100%；高度:25em；背景尺寸:封面；最大宽度:100%；}.videocenter {文本对齐:居中；}.视频 {填充顶部:1.875em；文本对齐:居中；}.underh {字体系列:'氧气'，无衬线；字体粗细:100；字体大小:22px；填充顶部:2.0625em；左边距:1.25em；最大宽度:100%；}.heading {字体系列:'Oswald'，无衬线；字体粗细:100；字体大小:49px；}.box1 {填充顶部:25px；}身体 {字体系列:'Oswald'，无衬线；背景: url(background.jpg) 无重复中心中心固定；背景尺寸:封面；box-shadow: 插入 0 0 0 1000px rgba(0,0,0,.3);最大宽度:100%；}.标识 {显示:块；宽度:75%；高度:96%；边距:0 自动；最大宽度:100%；}/*-------------------------------------------------------*//* 导航栏/*-------------------------------------------------------*/.导航栏{底边距:0；边界:无；最小高度:60px；-webkit-backface-visibility:隐藏；背面可见性:隐藏；-webkit-transition:所有 0.3 秒的缓入缓出；-moz-transition:所有 0.3 秒的缓入缓出；-ms-transition:所有 0.3 秒的缓入缓出；-o-transition:所有 0.3 秒的缓入缓出；过渡:所有 0.3 秒的缓入缓出；z-索引:1200；}.navbar-nav {边距:0；浮动:无；显示:内联块；}.navbar-nav >立>一种 {文本转换:大写；填充:0 24px；行高:90px；颜色:#fff;字体大小:19px；字体粗细:300；字母间距:0.02em；-webkit-transition:所有 0.3 秒的缓入缓出；-moz-transition:所有 0.3 秒的缓入缓出；-ms-transition:所有 0.3 秒的缓入缓出；-o-transition:所有 0.3 秒的缓入缓出；过渡:所有 0.3 秒的缓入缓出；}.navigation-overlay {背景颜色:rgba(17, 17, 17, 0.5);宽度:100%；行高:0；-webkit-transition:所有 0.3 秒的缓入缓出；-moz-transition:所有 0.3 秒的缓入缓出；-ms-transition:所有 0.3 秒的缓入缓出；-o-transition:所有 0.3 秒的缓入缓出；过渡:所有 0.3 秒的缓入缓出；}.navigation-overlay.sticky {背景:#000；背景:RGBA(0,0,0,0.8)；可见性:可见；不透明度:0.75；}.navigation-overlay.sticky .navbar-nav >立>一种，.navigation-overlay.sticky .menu-socials li >一种 {行高:60px；}.navbar-header {宽度:20%；padding-right: 15px;}.nav-wrap {宽度:60%；}.menu-社交{宽度:20%；浮动:对；填充:0 15px；}.logo 容器 {填充:0 15px；向左飘浮;}.logo 包装 {显示:表；宽度:100%；}.logo 包装 >一种 {显示:表格单元格；垂直对齐:中间；高度:90px；-webkit-transition:所有 0.3 秒的缓入缓出；-moz-transition:所有 0.3 秒的缓入缓出；-ms-transition:所有 0.3 秒的缓入缓出；-o-transition:所有 0.3 秒的缓入缓出；过渡:所有 0.3 秒的缓入缓出；}.logo-wrap.shrink >一种 {高度:60px；}.logo 包装 img {-webkit-transition:所有 0.3 秒的缓入缓出；-moz-transition:所有 0.3 秒的缓入缓出；-ms-transition:所有 0.3 秒的缓入缓出；-o-transition:所有 0.3 秒的缓入缓出；过渡:所有 0.3 秒的缓入缓出；高度:66px；}.logo-wrap.shrink img {高度:48px；}.navbar-collapse.in {溢出-x:隐藏；}.navbar-nav >立>答:悬停，.navbar-nav >.active >一种，.navbar-nav >.active >一:专注，.navbar-nav >.active >答:悬停，.menu-socials li >一个:悬停{不透明度:1；}.navbar-collapse {填充:0；边框顶部:无；}.nav .open >一种，.nav .open >一:专注，.nav .open >答:悬停，.nav >立>一:专注，.nav >立>一个:悬停{背景色:透明；文字装饰:无；边框颜色:#f2f2f2；}@media(最大宽度:991px){.navigation-overlay,.navigation-overlay.sticky {背景颜色:rgba(17, 17, 17, 0.9);}.nav-wrap {宽度:100%；填充:0；最小高度:0；}.nav-type-1 .container-fluid {填充:0 15px；}.navbar-header {宽度:100%；填充右:0;}.logo 包装 img {高度:48px；}.logo 包装 >一种 {高度:60px；}.navbar-nav {宽度:100%；填充:40px 0;}.navigation-overlay.sticky .navbar-nav >立>一种，.navigation-overlay .navbar-nav >立>一种 {填充:10px 0;行高:30px；}}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="navigation-overlay sticky"><div class="container-fluid"><div class="row"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><!-- 标志 --><div class="logo-container"><div class="logo-wrap local-scroll shrink"><a href="#home"></a>

<div class="col-md-8 col-xs-12 nav-wrap"><div class="collapse navbar-collapse text-center" id="navbar-collapse"><ul class="nav navbar-nav local-scroll text-center">

<a href="#home">首页</a>

<li><a href="#services">团队</a><li><a href="#portfolio">作品</a><li><a href="#about-us">活动</a><li><a href="#contact">联系方式</a>

<!-- 结束列 -->

<!-- 结束行-->