如果您点击上面的链接。导航栏未向右扩展。
我希望教科书标题有col-md-4
,主题也一样。
有什么建议??另外,我如何以...方式包装文本。像15字符后?
我的代码是:
<div class="container">
<div class="row">
<!--<div class="table-responsive">-->
<div class="col-md-12">
<table class = "table table-striped">
<h1>Textbooks</h1>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="/textbooks">Selling</a></li>
<li role="presentation"><a href="/textbook_giveaways">Giveaway</a></li>
</ul>
<!--<caption>Click on a textbook title to view it</caption>-->
<thead>
<tr>
<th>Textbook Title</th>
<th>Subject</th>
<th>Price</th>
<th>Accept Offer<a style="color:#000000 font-color:blue" data-toggle="popover" data-trigger="hover" data-content="Price is negotiable :D"><span class="glyphicon glyphicon-question-sign" style="color: #89ABE3"></span></a></th>
<!--<th>Created on</th>-->
</tr>
</thead>
<tbody>
<% @textbooks.each do |textbook| %>
<tr>
<!--<td><%= textbook.title %></td>-->
<td class="col-md-4"><%=link_to "#{textbook.title}", textbook_path(textbook.slug) %></td>
<td class="col-md-4"><%= textbook.subject %></td>
<td class="col-xs-1">$<%= textbook.price %></td>
<td class="col-xs-1">
<% if textbook.offer == true %>
<p class="offer_yes">✓</p>
<% else %>
<p class="offer_no">✕</p>
<%end%>
</td>
<!--<td><%= textbook.created_at.strftime("%d %b. %Y") %></td>-->
<!--<td><%= link_to 'Show', textbook %></td>-->
<%if textbook.user_email == current_user.email || (current_user.email == "codeinflash@gmail.com")%>
<td class="col-xs-1"><%= link_to 'Edit', edit_textbook_path(textbook) %></td>
<td class="col-xs-1"><%= link_to 'Delete', textbook, method: :delete, data: { confirm: 'Are you sure?' } %></td>
<% else %>
<td class="col-xs-1"></td>
<td class="col-xs-1"></td>
<%end%>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
我的导航栏代码如下:
<nav class="navbar navbar-dark navbar-inverse" role="navigation">
<div class="container-fluid" id="navfluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigationbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<%=root_path %>">Sample</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav">
<!--<li class="nav navbar-nav"><a href="/about">About <span class="sr-only">(current)</span></a></li>-->
<!--<li class="active"><a href="/about">About <span class="sr-only">(current)</span></a></li>-->
<li><a href="/about">About </a></li>
<li><a href="/contact">Contact </a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Categories <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/textbooks">Textbook</a></li>
<li><a href="">Housing - Coming Soon!</a></li>
<li><a href="">Party - Coming Soon!</a></li>
<!--
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
-->
</ul>
</li>
</ul>
<ul class="navbar-form navbar-left">
<%= form_tag(textbooks_path, :method => "get", id: "search-form", html: {class: 'form-group'}) do %>
<form class="navbar-form navbar-left" role="search">
<%= text_field_tag :search, params[:search], placeholder: "Search Anything!", class: "form-control" %>
<%= submit_tag "Search", :class => 'btn btn-default',:title => nil%>
</form>
<% end %>
</ul>
<!--
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<%= form_tag(textbooks_path, :method => "get", id: "search-form", html: {class: 'form-group'}) do %>
<%= text_field_tag :search, params[:search], placeholder: "Search all deals", class: "form-control" %>
</div>
<%= submit_tag "Search", :class => 'btn btn-default',:title => nil%>
<% end %>
</form>
-->
<!-- original below
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search all deals">
</div>
<button type="submit" class="btn btn-default">Search!</button>
</form>
-->
<ul class="nav navbar-nav navbar-right">
<% if not user_signed_in? %>
<%= form_tag user_session_path, method: :post, class: "navbar-form" do %>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-user"></i>
</div>
<%= email_field_tag :email, nil, class: "form-control input-sm", name: "user[email]", id: "user_email_navbar", placeholder: "Email", validate:true, required:true %>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<%= password_field_tag :password, nil, class: "form-control input-sm", name: "user[password]", id: "user_password_navbar", placeholder: "Password", validate:true, required:true %>
</div>
</div>
<%= submit_tag "Login", id: "login_navbar", class: "btn btn-success btn-sm" %>
<% end %>
<% else %>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Account<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<%= link_to edit_user_registration_path do %>
<%= icon('cog')%> <%=current_user.email%>
<% end %>
</li>
<li class="divider"></li>
<li>
<%= link_to destroy_user_session_path, :method => 'delete' do %>
<%= icon('power-off') %> Logout
<% end %>
</li>
</ul>
</li>
<% end %>
</ul>
</div>
</div>
</nav>
我有views / layouts / application.html.erb:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
<% if content_for? :title %>
<%= yield :title %>
<% else %>
myUdeal
<% end %>
</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'partials/navbar' %>
<%= render 'partials/flash_notification' %>
<%= yield %>
</body>
</html>
答案 0 :(得分:2)
我无法重现导航栏问题 - 请参阅bootply here - 我只是粘贴了您的代码并删除了erb(rails服务器代码)并替换为占位符字符串。导航栏确实跨越整个宽度。
要获得...,您可以使用Ruby string#truncate
my_string.truncate(15)
如果你的字符串包含html,你可以使用truncate_html rails gem:
raw(truncate_html(my_html, length: 15))
这可确保字符串在html边界处被截断,而不会留下未关闭的html标记。