我刚刚下载了bootstrap的一些部分，它弄乱了我网站某些元素的定位。
1) 我根本无法改变发送按钮的样式。
2）输入您的电子邮件地址的文本输入栏出现在文本下方，我无法让它出现在文本旁边。3）我无法将搜索栏定位在右侧。我想一直向右浮动。我认为它没有这样做的原因是因为它已经是 a 的一部分，并且不知何故把它搞砸了。我怎样才能让它一直向右浮动？
有什么建议么？
这是我的代码：
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= yield(:title) %></title>
<%= stylesheet_link_tag "layout", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= favicon_link_tag 'favicon.ico' %>
<link rel="shortcut icon" href="/favicon.ico" />
<%= csrf_meta_tags %>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-42526156-1', 'collegeanswerz.com');
ga('send', 'pageview');
</script>
</head>
<body>
<header>
<p id="sign_in">
<%= link_to "be a mentor", "/mentor" %><br />
<%= link_to "find a mentor", "/find-a-mentor" %><br /><br /><br />
</p>
<div class="idea_bar">
<div class="left_idea_bar">
<p>Ideas, comments, questions, suggestions? Help us help you!</p>
<%= form_tag("/application_controller/email", :method => "post", :id => "idea_bar_form") do %>
<%= text_area_tag('message', nil, :size => "60x4", :id => "message", :name => "message") %> <br />
<%= label_tag(:email, "• include your email if you want a response:") %>
<%= text_field_tag(:email, nil, :id => "email", :size => "36", :name => "email") %>
</div>
<button id="submit" type="submit" form="idea_bar_form"><span id="big_submit">Send</span>
<span id="small_submit"><br />• one click<br />• anonymous</span></button>
<% end %>
</div>
<nav id="main_nav">
<hr />
<ul>
<li id="logo"><%= link_to image_tag('favicon.png', size: "50x50", alt: "CollegeANSWERZ"), '/' %></li>
<li><%= link_to 'Colleges', '/colleges' %></li>
<li> | </li>
<li><%= link_to 'About College', '/about-college' %></li>
<li> | </li>
<li><%= link_to 'Essays', '/essays' %></li>
<%= form_tag("/search", :method => 'get') do -%>
<li id="search"> <%= search_field_tag :search, params[:search], :placeholder => 'enter college' %></li>
<% end -%>
</ul>
<hr />
</nav>
</header>
<div class="container">
<%= yield %>
</div>
</body>
</html>
layout.css.scss
@import "bootstrap";
/* universal */
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
clear: left;
width: 900px;
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, serif;
}
h1 {
font-family: Helvetica Neue !important;
text-align: center;
color: rgba(24, 21, 21, 0.8);
font-size: 60px;
}
margin-bottom: 50px;
a {
text-decoration: none;
}
}
/* sign in */
#sign_in {
float: right;
font-size: 10px;
margin-right: 10px;
a {
text-decoration: underline;
}
}
/* idea bar */
.idea_bar {
background-color: rgba(0, 0, 0, 0.02);
margin-top: 10px;
padding-bottom: 80px;
padding-left: 20px;
.left_idea_bar {
float: left;
color: #999;
}
input[type="text"] {
float: left;
clear: none;
padding: 4px 4px 3px 4px;
font-size: 12px;
}
#submit {
margin-top: 47px;
background: #EBEBEB;
border: 1px solid #bbb;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
box-shadow: inset 0 0 1px 1px #f6f6f6;
color: #666;
font-family: Verdana, Geneva, sans-serif;
padding: 8px 0 9px;
text-align: center;
text-shadow: 0 1px 0 #fff;
width: 120px;
height: 91px;
#big_submit { font-size: 18px;}
#small_submit { font-size: 10px; margin-top: 100px;}
&:hover {
background: #d9d9d9;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222;
cursor: pointer;
}
&:active {
background: #d0d0d0;
-webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
box-shadow: inset 0 0 1px 1px #e3e3e3;
color: #000;
}
}
textarea {
padding: 6px;
font-size: 14px;
margin-bottom: 12px;
width: 450px;
margin-right: 20px;
}
}
/* main navigation */
#main_nav {
clear: both;
ul {
width: 840px;
height: 10px;
margin-top: -2px;
margin-bottom: 5px;
background-color: #E6F0FF;
padding: 30px;
float: left;
list-style-type: none;
#logo {
margin-right: 125px;
margin-top: -20px;
font-weight: bold;
font-size: 16px;
}
input[type="search"] {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
width: 175px;
}
li {
margin-top: -5px;
margin-right: 45px;
float: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
a {
text-decoration: none;
font-weight: bold;
color: blue;
font-size: 16px;
}
}
}
/* container */
.container {
clear: both;
}