我和我的朋友们正在尝试为我们学校所属的项目开发一个基于bootstrap的网站。
一切都很顺利，我们的网站现场直播，在平板电脑上查看还可以，移动设备上的viem还可以，但移动肖像很糟糕..
http://www.sosklobouky.cz/DIKYPR/index.html
jumbotron中的文字在jumbotron之外，我想问我该如何修复它？
我应该定位设备@media（max-width：767px;）还是我应该采用另一种方式？
再次感谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIKYPR - MěSOŠ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Loading Bootstrap -->
<link href="css/vendor/bootstrap.min.css" rel="stylesheet">
<link href="css/vendor/bootstrap.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href="STYLE.CSS" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="css/flat-ui.css" rel="stylesheet">
<link href="css/flat-ui.min.css" rel="stylesheet">
<!--ikonka v záložce-->
<link rel="shortcut icon" href="img/klobouk.png">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/vendor/html5shiv.js"></script>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--NAVIGACE-->
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="navbar">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">DIKYPR</a><!--logo-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01"><!--responzivnost-->
<span class="sr-only">Navigace</span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-01" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home" data-loc="home">DOMŮ</a></li>
<li><a href="#obsah" data-loc="obsah">OBSAH</a></li>
<li><a href="skoleni.html" data-loc="skoleni">ŠKOLENÍ</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">AKTIVITY<b class="caret"></b></a>
<span class="dropdown-arrow"></span>
<ul class="dropdown-menu">
<li><a href="aktivity.html#odkaz1">KOUČINK, MENTORING A PODPORA</a></li>
<li><a href="aktivity.html#odkaz2">VZDĚLÁNÍ K INTEGRACI ICT DO VÝUKY</a></li>
<li><a href="aktivity.html#odkaz3">EVALUACE</a></li>
</ul>
</li>
<li><a href="kestazeni.html">KE STAŽENÍ</a></li>
</ul>
</div>
</div>
</nav>
</header>
<section id="home" class="scroll-panel">
<div class="jumbotron">
<div class="container">
<div class="row">
<h1 align="center">Didaktika pro kyberprostor</h1>
</div>
<div class="col-md-12">
<div class="row">
<p> </p>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p class="text-left">Operační program<br>Vzdělávání pro konkurence schopnost</p>
</div>
<div class="col-md-4">
<p class="text-right">Registrační číslo projektu<br>CZ.1.07/1.3.00/51.0027</p>
</div>
</div><!--row-->
<div class="row" align="center">
<img src="img/lenovo.png" class="img-responsive" align="center">
</div>
<div class="row">
<div class="col-md-6">
<p class="text-left">Městská střední odborná škola,<br>Klobouky u Brna nám. Míru 6,<br>příspěvková organizace</p>
</div>
<div class="col-md-6">
<p class="text-right">nám. Míru 6 č. p. 101,<br>Klobouky u Brna,<br>PSČ 691 72</p>
</div>
</div><!--row-->
<div class="row">
<div class="col-md-12" align="center">
<a href="#obsah" data-loc="obsah">
<button type="button" class="btn btn-success btn-lg btn-lg">CHCI SE DOZVĚDĚT VÍC</button>
</a>
</div><!--colmd12-->
</div><!--row-->
</div><!--ukončuje container-->
</div><!--JUMBOTRON-->
</section>
<section id="obsah" class="scroll-panel">
<div class="container">
<div class="row">
<br>
<h1 align="center" class="nadpis2">Popis projektu</h1>
</div><!--row-->
<div class="row">
<p class="text-justify">Obsah projektu připravujeme v souladu Výzvou k předkládání žádostí individuálních projektů OP Vzdělávání pro konkurenceschopnost, Oblast podpory 1.3 - Další vzdělávání pracovníků škol
a školských zařízení.<br>
Zdůvodnění Výzvy, a její Metodický výklad, jasně ukazují, že i přes významné investice vynaložené v oblasti ICT našich škol nejsou přínosy a efektivnost využívání dostupných zařízení na očekávané výši.<br>
Naše společnost je zaměřena na dodávky informačních systémů a víme, co to pro efektivnost vynaložené investice znamená umět jí využívat. Proto jsme se v posledních létech výrazně orientovali na znalosti a dovednosti uživatelů a na metody vzdělávání. Cílům projektu rozumíme, ztotožňujeme ses nimi, a věříme, že zvolenou metodou individuálních projektů lze očekávaných cílů dosáhnout.<br>
Podstatu projektu nespatřujeme v dotykových zařízeních, ta jsou jen okrajovou investicí.
Za stěžejní považujeme metody, jak efektivně využít dostupná zařízení. Od toho se také odvíjí
i název našeho projektu.</p>
</div>
</div><!--ukončuje container-->
</section>
<hr class="divider"><!--oddělovač-->
<!---------AKTIVITY------->
<section>
<div class="container">
<div class="row">
<center>
<div class="col-md-4">
<h6>Koučink, mentoring a podpora pedagogických pracovníků</h6>
<p><a class="btn btn-success" href="aktivity.html#odkaz1" role="button">VÍCE »</a></p>
</div>
<div class="col-md-4">
<h6>Vzdělávání pedagogických pracovníků k integraci ICT<br>do výuky</h6>
<p><a class="btn btn-success" href="aktivity.html#odkaz2" role="button">VÍCE »</a></p>
</div>
<div class="col-md-4">
<h6 class="evaluace">Evaluace</h6>
<p><a class="btn btn-success" href="aktivity.html#odkaz3" role="button">VÍCE »</a></p>
</center>
</div><!--ukončuje colmd4-->
</div><!--ukončuje row-->
</div><!--ukončuje container-->
<!--řádek se sponzory-->
<div class="container">
<div class="row" align="center" id="paticka">
<div class="col-md-12">
<img src="img/EU.png" class="img-responsive">
</div>
</div>
</div><!--ukončí container-->
</section>
<div id="footer">
<div class="container">
<p class="text-muted credit" align="center">© 2014 Mičulka Martin, Ivan Ondřej, Havlík Ondřej</p>
</div>
</div>
<!-- jQuery (necessary for Flat UI's JavaScript plugins) -->
<script src="js/vendor/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/flat-ui.min.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
</body>
</html>
body {
font-family: 'roboto_slabregular';
}
#nadpis {
margin-top: 20%;
padding-bottom: 30px;
}
#operprog, #regcislo {
padding-bottom: 30px;
}
#nadpis1 {
margin-top: 10%;
padding-bottom: 30px;
}
#napis11{
margin-top: 15%;
padding-bottom: 25px;
}
#odstavce {
padding-bottom: 10px;
}
.nadpis2 {
padding-bottom: 30px;
}
#odstavec1{
font-weight: bold;
}
.evaluace {
padding-top: 18px;
}
#mezera{
padding-top: 150px;
}
#paticka {
padding-top: 8px;
}
答案 0 :(得分：0)
只需将下面的代码行添加到您的身体css代码
即可body {
overflow-x: hidden;
}