【发布时间】:2017-03-27 04:27:03
【问题描述】:
我正在尝试创建一个自动滑动引导轮播,它实际上工作正常。但我正在努力让菜单看起来像这个例子:
到目前为止,这是代码。我必须更改/添加什么才能让导航看起来像示例?而且我不想在中间有引导轮播的那些小圆圈。你知道如何删除它们吗?
.leistungBackground {
background: #2E492B;
color: white;
padding: 5%;
}
.border {
border: 1px solid grey;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="col-md-1">
</div>
<div class="col-md-10 border">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-animation="slide" data-easing="swing" data-direction="horizontal" data-slideshowSpeed="4000" data-animationSpeed="500" data-controlNav="false">
<!-- Navigation -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active" style="display:inline-block"><a href="#Uebersetzungsbuero">Übersetzungen</a></li>
<li data-target="#myCarousel" data-slide-to="1" style="display:inline-block"><a href="#Beglaubigungen">Beglaubigungen</a></li>
<li data-target="#myCarousel" data-slide-to="2" style="display:inline-block"><a href="#Korrekturlesen">Korrekturlesen</a></li>
<li data-target="#myCarousel" data-slide-to="3" style="display:inline-block"><a href="#Dolmetschen">Dolmetschen</a></li>
<li data-target="#myCarousel" data-slide-to="4" style="display:inline-block"><a href="#Website-Uebersetzung">Website-Übersetzung</a></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" id="Uebersetzungsbuero">
<div class="row">
<div class="col-md-6">
<img src="https://image.jimcdn.com/app/cms/image/transf/dimension=255x10000:format=png/path/s6226916d6715ba5b/image/i163a1867238cf6c1/version/1438331241/image.png" alt="a" height="">
</div>
<div class="col-md-6 leistungBackground">
<h3>Übersetzungen</h3>
<hr>
<p>Übersetzungsdienst Jena - BM-Translations bietet Ihnen Übersetzungen in den Fachgebieten Medzin, Technik, Recht und Marketing aus den Sprachen Französisch, Englisch, Arabisch, Italienisch und Spanisch ins Deutsche sowie aus
dem Deutschen ins Französische. Bei weiteren Sprachanforderungen oder anderen Fachgebieten, fragen Sie mich doch gern nach meinem Expertennetzwerk.</p>
</div>
</div>
</div>
<div class="item" id="Beglaubigungen">
<div class="row">
<div class="col-md-6">
<img src="https://image.jimcdn.com/app/cms/image/transf/dimension=255x10000:format=png/path/s6226916d6715ba5b/image/i163a1867238cf6c1/version/1438331241/image.png" alt="a" height="">
</div>
<div class="col-md-6 leistungBackground">
<h3>Beglaubigungen</h3>
<hr>
<p>Beglaubigte Übersetzungen, bspw. für Behörden oder Gerichte, müssen durch einen durch die Landgerichte ermächtigten Übersetzer ausgeführt werden. Benötigen Sie also eine Beglaubigung, so sind Sie bei mir genau richtig! Denn
als beeidigte Übersetzerin für die französische und arabische Sprache liefere ich Ihnen eine amtliche Bescheinigung der Korrektheit einer Signatur oder Kopie.</p>
</div>
</div>
</div>
<div class="item" id="Korrekturlesen">
<div class="row">
<div class="col-md-6">
<img src="https://image.jimcdn.com/app/cms/image/transf/dimension=255x10000:format=png/path/s6226916d6715ba5b/image/i163a1867238cf6c1/version/1438331241/image.png" alt="a" height="">
</div>
<div class="col-md-6 leistungBackground">
<h3>Korrekturlesen bzw. Proofreadings (Korrektorate & Lektorate)</h3>
<hr>
<p>Fehler sind menschlich, und gerade beim Schreiben passiert das all zu oft. Wer seine Texte lediglich selbst redigiert, übersieht meist eine Menge. Ich kenne das sehr gut, da ich auch Texterstellung anbiete und immer mindestens einen Lektor
gegenlesen lasse. Denn man selbst sieht oft den Wald vor lauter Bäumen nicht.</p>
</div>
</div>
</div>
<div class="item" id="Dolmetschen">
<div class="row">
<div class="col-md-6">
<img src="https://image.jimcdn.com/app/cms/image/transf/dimension=255x10000:format=png/path/s6226916d6715ba5b/image/i163a1867238cf6c1/version/1438331241/image.png" alt="a" height="">
</div>
<div class="col-md-6 leistungBackground">
<h3>Dolmetschen</h3>
<hr>
<p>Meine Leidenschaft sind Sprachen im Allgemeinen und im Besonderen die französische Sprache. So verbringe ich jedes Jahr mehrere Monate im schönen Frankreich und kenne somit Land, Kultur & Sprache (sowie deren Besonderheiten). Daher
bin ich nun auch bereits seit vielen Jahren erfolgreich als Dolmetscher für Französisch
<> Deutsch tätig.</p>
</div>
</div>
</div>
<div class="item" id="Website-Uebersetzung">
<div class="row">
<div class="col-md-6">
<img src="https://image.jimcdn.com/app/cms/image/transf/dimension=255x10000:format=png/path/s6226916d6715ba5b/image/i163a1867238cf6c1/version/1438331241/image.png" alt="a" height="">
</div>
<div class="col-md-6 leistungBackground">
<h3>Website-Übersetzung & Website-Lokalisierung</h3>
<hr>
<p>Bei mir erhalten Sie Website-Übersetzungen auf höchstem sprachlichen Niveau und unter Berücksichtigung internationaler Standards nach dem Muttersprachlerprinzip aus den Sprachen Französisch, Englisch, Arabisch, Spanisch & Italienisch
ins Deutsche. Bei der Übersetzung Ihrer Webseiten werden Ihre Vorgaben umgehend und adäquat umgesetzt. Länderspezifische sprachliche & kulturelle Besonderheiten werden selbstverständlich eingearbeitet.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1">
</div>
【问题讨论】:
标签: css twitter-bootstrap navigation carousel