这是代码：http://collabedit.com/a2mjd
我尝试过不同的方法，但没有一种方法可以解决问题。这就是为什么搜索输入没有显示输入的文本？
答案 0 :(得分：0)
input[type="text"]。为避免使用!important，您可以覆盖它，从而影响.navbar input[type="text"]。请参阅代码段：
.navbar-brand {
font-family: 'Indie Flower', cursive;
font-size: 32px;
}
body,
td,
th {
color: #F31215;
background-color: white;
color: #94172B;
}
.navbar input[type="text"] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
color: black;
}
/* When the input field gets focus, change its width to 100% */
.navbar input[type="text"]:focus {
/*width: 100%;*/
color: black;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Motokauppa</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Info</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Prätkät <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Husqvarna 701 supermoto</a>
</li>
<li><a href="#">KTM Supermoto 450</a>
</li>
<li><a href="#">Ducati Panigale</a>
</li>
</ul>
</li>
<li><a href="#">Yhteystiedot</a>
</li>
<li>
<a href="#">
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span>
<input type="text" name="search" placeholder="Etsi">
</button>
</a>
</li>
<li>
<a href="#">
<p>
</p>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-home"></span></a>
</li>
<li>
<a href="#">
<p><span class="glyphicon glyphicon-envelope"></span>
</p>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- haitarimalli jqueryllä -->
<div id="Accordion1">
<h3><a href="#">Section 1</a></h3>
<div>
<p>Content 1</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Content 2</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Content 3</p>
</div>
</div>
<!-- tab queryllä -->
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a>
</li>
<li><a href="#tabs-2">Tab 2</a>
</li>
<li><a href="#tabs-3">Tab 3</a>
</li>
</ul>
<div id="tabs-1">
<p>Content 1</p>
</div>
<div id="tabs-2">
<p>Content 2</p>
</div>
<div id="tabs-3">
<p>Content 3</p>
</div>
</div>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://images.mcn.bauercdn.com/PageFiles/555744/701sm-1.jpg" alt="701sm-1" class="center-block" />
<div class="carousel-caption">
<h3>Husqvarna 701 Supermoto </h3>
<p>9 980€</p>
</div>
</div>
<div class="item">
<img src="https://s-media-cache-ak0.pinimg.com/originals/26/27/09/262709f7281b96a074042f7f891e93c4.jpg" alt="KTM450" class="center-block" />
<div class="carousel-caption">
<h3>KTM Supermoto 450<br>
</h3>
<p>10 390€</p>
</div>
</div>
<div class="item">
<img src="http://images.mcn.bauercdn.com/PageFiles/578783/1000x750/1299Anniversario_02.jpg" alt="Ducati-Panigale" class="center-block" />
<div class="carousel-caption">
<h3>Ducati Panigale</h3>
<p>30 490€</p>
</div>
</div>
<div class="item">
<img src="http://www.motoshop-vohl.de/wp-content/uploads/2012/12/IMG_6517.jpg" alt="motokauppa" class="center-block" />
<div class="carousel-caption">
<h3>Kauppamme</h3>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container">
<div class="jumbotron">
<h1>Motokauppa Pasilassa</h1>
<p>Kauppamme on perustettu vuonna 2017. Kaupasta löydät monia eri tunnettuja merkkejä, tutustu valikoimaamme Tuotteet-osiosta.</p>
</div>
</div>