Bootstrap table affect navbar working wrong way

Question

mobile view

If you click above link. The navbar is not expanding to the right. I want to have Textbook title have col-md-4, subject also same. Any suggestion?? Also How can I wrap the text in like ....way. after like 15character?

My code is:

<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!!!

my navbar code is below:

<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>

I have 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>

Answer 1

I cannot reproduce the navbar problem - see the bootply here - I just pasted your code and removed the erb (rails server code) and replaced with placeholder strings. The navbar does span the full width.

To get the ..., you can use Ruby string#truncate

my_string.truncate(15)

If your string contains html, you could use the truncate_html rails gem:

raw(truncate_html(my_html, length: 15))

This ensures that the string is truncated at the html boundary, without leaving unclosed html tags.