Question

我的表格标题如下：

我不喜欢一些标题在多行上呈现的方式。我希望他们所有人都在一条线上，但我不知道该怎么做。

另外，我不喜欢Notes标题占用了这么多的表格宽度。如何减少占用的宽度？

我正在使用table-responsive as the w3schools example shows here。

更新：请注意，只需为较长的标题列添加更多列网格空间:(例如：col-sm-4，而不是说col-sm-1或col-sm-2）是不是一个好的解决方案，因为这会占用太多网格点。后来我没有足够的网格点留给我的其余列。

基本上我总是希望列标题在一行上。如果列标题不能放在一行上，则进入响应模式以确保列标题位于单行上。

这是一段代码段。确保单击＆＃34;整页＆＃34;：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Table</h2>
    <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname really really long last name</th>
            <th>Age</th>
            <th>City</th>
            <th>Country</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis
              parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at
              eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum
              nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis
              dis parturient montes, nascetur ridiculus mus.</td>
            <td>Pitt</td>
            <td>35</td>
            <td>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis
              parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at
              eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum
              nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis
              dis parturient montes, nascetur ridiculus mus.</td>
            <td>USA</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</body>

</html>

＆＃13;

Answer 1

您可以使用col-[viewport]-[size]。请记住，列大小应总计为12.请参阅以下更改：

我随机设置了列大小，您可以根据自己的要求进行修改：如下所示，总数不得超过12 1+3+4+1+2+1 = 12

<tr>
    <th class="col-xs-1">#</th>
    <th class="col-xs-3">Firstname</th>
    <th class="col-xs-4">Lastname really really long last name</th>
    <th class="col-xs-1">Age</th>
    <th class="col-xs-2">City</th>
    <th class="col-xs-1">Country</th>
</tr>

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Table</h2>
    <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th class="col-xs-1">#</th>
            <th class="col-xs-3">Firstname</th>
            <th class="col-xs-4">Lastname really really long last name</th>
            <th class="col-xs-1">Age</th>
            <th class="col-xs-2">City</th>
            <th class="col-xs-1">Country</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis
              parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at
              eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum
              nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis
              dis parturient montes, nascetur ridiculus mus.</td>
            <td>Pitt</td>
            <td>35</td>
            <td>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis
              parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at
              eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum
              nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis
              dis parturient montes, nascetur ridiculus mus.</td>
            <td>USA</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</body>

</html>

＆＃13;

修改

如果你的内容很大并且不适合单行，那就不会;即使你让它响应。如果需要，响应性尝试通过添加双线来适应所有行。


如何实现您的需求：



调整列大小并使其他列更小

降低字体大小以使其适合一行。

编写指定宽度的自定义类


例如，默认宽度为：

.col-xs-4{ width:33.33%; }

如果您想要自定义宽度，请创建如下所示的类[IMP：总计应该完全100%]

.col-custom-1{ width:20% } .col-custom-2{ width:20% } .col-custom-3{ width:20% } .col-custom-4{ width:20% } .col-custom-5{ width:20% }

您可以根据需要调整宽度或直接使用内联宽度，我更喜欢类。

Answer 2

Django模板可能有助于解决the multiple lines issue

你可以分开你的html而不是多重性

我的例子，让我们说我们有两个文件用多行标题填充。

这是base.html

    {% load staticfiles %}
<!-- DOCTYPE html -->
<html>
<head>
<title>{% block head_title %}Learn You English{% endblock head_title %}</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- base css  -->
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}" />
<style>
{% block style %}{% endblock style %}
</style>

</head>
<body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

{% include "messages_display.html" %}
<div class'container'>
{% block content %}
<!-- end of block html -->
{% endblock content %}
</div>

<!-- <img src='{% static "img/beach.jpg" %}' />
 -->


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

这就是你可以摆脱多行的方式

{% extends "base.html" %}
    {% block content %}
 {% endblock content %}

。 Post_list.html就是一个例子

<!--obj == query set-->
{% extends "base.html" %}
{% block content %}

<div class='col-sm-6 col-sm-offset-3'>
    <h1>{{ title }}</h1>
    <!-- Search get method--> 
<form method='GET' action ''>
<input type='text' name='q' placeholder='Search posts' value='{{ request.GET.q }}'/>
<input type='submit' vlaue='Search' />
</form>
{% for obj in object_list %}
<div class="row"> 
  <div class="col-sm-12">
    <div class="thumbnail">
        {% if obj.image %}
        <img src='{{ obj.image.url }}' class='img-responsive' />
        {% endif %}
        <div class="caption">
        {% if obj.draft %}<h3>Staff only: Draft</h3>{% endif %} {% if obj.publish > today %}<h3>Staff ONLY: Future Post</h3>{% endif %}
        <h3><a href='{{ obj.get_absolute_url }}'>{{ obj.title }}</a> <small>{{ obj.publish}} </small></h3>
        {% if obj.user.get_full_name %}<p>Author: {{ obj.user.get_full_name }}<p>{% endif %}
        <p>{{ obj.content|linebreaks|truncatechars:120 }}</p>
        <p><a href="{{ obj.get_absolute_url }}" class="btn btn-primary" role="button">View</a></p>
      </div>
    </div>
  </div>
<hr/>
</div>
{% endfor %}

<!-- Pagination modified q for 
&q={{ request.GET.q }}" is keeping the search chararcter while switching 
the page in pagination
-->
<div class="pagination">
    <span class="step-links">
        {% if object_list.has_previous %}
            <a href="?{{ page_request_var }}={{ object_list.previous_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ object_list.number }} of {{ object_list.paginator.num_pages }}.
        </span>

        {% if object_list.has_next %}
            <a href="?{{ page_request_var }}={{ object_list.next_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">next</a>
        {% endif %}
    </span>
</div>


</div>
<!-- end of block html -->
{% endblock content %}

我不确定宽度，但可能会查看以下内容可能会有所帮助

<div class='col-sm-6 col-sm-offset-3'>

Bootstrap表强制所有表格标题显示在单行

2 个答案: