मैं ट्विटर बूटस्ट्रैप और रेल का उपयोग कर रहा हूं और मैं दाईं ओर एक नौसेना आइटम फ़्लोट नहीं कर सकता।किसी भी वर्ग = पुल-दाएं या फ्लोट के साथ एक ट्विटर बूटस्ट्रैप navbar आइटम को फ़्लोट करने में असमर्थ: दाएं
मैं कुछ इस तरह उपयोग करने की कोशिश:
<li class="whoami pull-right"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
... लेकिन लिंक बाईं रुके थे और फ़ायरबग "float:left;"
पता चला तो मैं bootstrap_and_overrides.css.less में और home.html.erb में सीएसएस नाव overide करने की कोशिश की, लेकिन न तो काम किया। फायरबग ने संकेत दिया कि इसे दो सीएसएस फ्लोट स्टेटमेंट मिले, लेकिन मेरे ऊपर बूटस्ट्रैप विकल्प चुना। इसलिए मैं अटक गया हूं और सोच रहा हूं कि नेविबार को कैसे अनुकूलित किया जाए। मैं शायद यहां कुछ गलत कर रहा हूं, लेकिन मुझे बस यह नहीं दिख रहा है।
application.html.erb:
<!DOCTYPE html>
<html>
<head>
... removed to shorten the length of this post
</head>
<body>
<header>
<%= render 'layouts/navigation' %>
</header>
<div id="main" role="main">
<div class="container">
<div class="content">
<div class="row">
<div class="span12">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
</body>
</html>
_navigation.html.erb:
<div class="container span12">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<%= link_to "Cases", root_path, :class=>"brand"%>
<% if user_signed_in? %>
<li> <%= link_to "My Cases", cases_path %> </li>
<li> <%= link_to 'Dash', dash_path %> </li>
<% if current_user.has_role? :admin %>
<li> <%= link_to 'Admin', users_path, :id=>"Admin" %> </li>
<% end %>
<li> <%= link_to 'Logout', destroy_user_session_path, :method=>'delete', :id => "Logout" %> </li>
<li class="whoami"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
<% else %>
<li> <%= link_to 'Login', new_user_session_path %> </li>
<li> <%= link_to 'Sign up', new_user_registration_path %> </li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
bootstrap_and_overrides.css.less:
@import "twitter/bootstrap/bootstrap";
body {
padding-top: 60px;
}
@import "twitter/bootstrap/responsive";
// Set the correct sprite paths
// ...REMOVED to shorten the length of this post
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// @linkColor: #ff0000;
.whoami {
float:right;
}
यहाँ मेरी कोड है
कब मैं एक पृष्ठ लोड करता हूं, मैं navbar देखता हूं, लेकिन अंतिम आइटम दाईं ओर नहीं चलाया जाता है।
इस तरह लग रहा है:
और वहाँ एक और स्क्रीन यहां टोपी कि some more info से पता चलता है।
जैसा कि आप देख सकते हैं, फ़ायरबग को "float:right;" विकल्प मिला, लेकिन इसके बजाय "float:left;" विकल्प का उपयोग किया गया था।
मुझे यहां समझने में एक अंतर है, लेकिन मुझे यकीन नहीं है कि कहां है।
के लिए प्रतिक्रियाओं को संबोधित करें:
पुल सही की- उपयोग और बूटस्ट्रैप नेवबार ट्विटर फ़ायरबग उत्पादन स्वरूपण
- अधिभावी सीएसएस
व्याख्या
संपादित करें: मैं अपनी पहली पोस्ट किया है कभी यहां jsfiddle: http://jsfiddle.net/uCHQs/2/ यह ब्राउज़र के शो स्रोत की प्रतिलिपि/पेस्ट का प्रतिनिधित्व करता है और जो मैं एकत्र करता हूं वह रिलीज सीएसएस लोड और से है रेल द्वारा rved।
अग्रिम धन्यवाद!
मुझे navbar-search के साथ एक ही समस्या थी। बहुत धन्यवाद! – Bendim