我正在使用rails和twitter bootstrap。出于某种原因,我可以设置10%的保证金,但我也不能这样做。坦率地说,我很尴尬地问这个,但我希望它与Twitter引导程序的输入有关。这一切都做了很多。
这是我的HTML
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container2">
<div id="logowrap">
<%= link_to image_tag("/images/doghouse.png"), root_path %>
<% if signed_in? %>
</div>
<div id="searchcontainer">
<div id="search">
<%= form_tag("/shirts", method: "get") do %>
<%= text_field_tag(:q) %>
</div>
<div class="searchsubmit">
<%= submit_tag("Search") %>
</div>
</div>
<% end %>
<% end %>
<div id="patnav">
<ul>
<% if signed_in? %>
<li><%= link_to "Users", users_path %></li>
<li id="fat-menu" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Profile", current_user %></li>
<li><%= link_to "Settings", edit_user_path(current_user) %></li>
<li class="divider"></li>
<li>
<%= link_to "Sign out", signout_path, method: "delete" %>
</li>
</ul>
</li>
<% else %>
<li><%= link_to "Sign in", signin_path %></li>
<% end %>
</ul>
</div>
</div>
这是我的CSS
#logowrap {
float: left;
width:250px;
height:50px;
}
.container2 {
height:50px;
width:100%;
margin-left:10%;
margin-right: 10%;
}
.navbar {
width:100%;
}
#logo:hover {
color: #fff;
text-decoration: none;
}
#patnav {
float:left;
height:50px;
display:inline;}
ul
{float:right;
height:50px;
width:100%;}
li {
display: inline;
}
#searchcontainer {
width:350px;
height:30px;
float:left;
margin-top:12px;
}
#search {
height:33px;
width: 200px;
input {width: 200px;
line-height:21px;
border-radius: 10px 0px 0px 10px;
}
float:left;
}
.searchsubmit {
height: 30px;
width: 100px;
overflow:visible;
float:left;
input {border-radius: 0px 10px 10px 0px;
background-color:#ffc18f;}
}
答案 0 :(得分:1)
你需要.container2的宽度为80%,如果它的水平边距为10%和10%(总共20%)jsfiddle.net/dYpk3 ....边距是对象宽度的一部分