Bootstrap表影响导航栏工作方式错误

时间:2016-04-21 02:56:08

标签: css twitter-bootstrap

mobile view

如果您点击上面的链接。导航栏未向右扩展。 我希望教科书标题有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">&#x2713;</p>
              <% else %>
                <p class="offer_no">&#x2715;</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>

UPDATE !!!

我的导航栏代码如下:

<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')%>&nbsp;<%=current_user.email%>
                  <% end %>
                </li>

                <li class="divider"></li>
                <li>
                  <%= link_to destroy_user_session_path, :method => 'delete' do %>
                      <%= icon('power-off') %>&nbsp;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>

1 个答案:

答案 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标记。