平板电脑上的Bootstrap表响应

时间:2016-01-14 02:38:17

标签: html css twitter-bootstrap

我正在使用bootstrap的表响应为我的布局创建一个简单的响应表。但是这个课程只适用于移动设备。有没有办法可以让它在平板电脑上运行?

from random import randint
from time import sleep
import logging
import logging.handlers
import multiprocessing


def child_process(queue, index: int):
    child_handler = logging.handlers.QueueHandler(queue)
    child_logger = logging.getLogger('Child No.{}'.format(index))
    child_logger.addHandler(child_handler)
    child_logger.setLevel(logging.INFO)

    waiting_time = randint(1, 5)
    child_logger.log(logging.INFO, 'Waiting {}s.'.format(waiting_time))
    sleep(waiting_time)

if __name__ == '__main__':
    root_logger = logging.getLogger()
    root_handler = logging.FileHandler('test.log')
    root_formatter = logging.Formatter(
        '[%(levelname)s] %(asctime)s %(name)s: %(message)s',
        '%Y-%m-%dT%H:%M:%S%z'
    )
    root_handler.setFormatter(root_formatter)
    root_logger.addHandler(root_handler)

    children = {}

    multiprocessing.set_start_method('fork')
    q = multiprocessing.Queue()

    parent_handler = logging.handlers.QueueHandler(q)
    parent_logger = logging.getLogger('Parent')
    parent_logger.addHandler(parent_handler)
    parent_logger.setLevel(logging.INFO)

    for i in range(1, 6):
        child = multiprocessing.Process(target=child_process, args=(q, i))
        children[i] = child
        child.start()
        parent_logger.log(logging.INFO, 'Forking Child No.{} whose pid is {}.'.format(i, child.pid))

    done_count = 0
    while done_count < len(children):
        for j, c in children.items():
            if c is not None and not c.is_alive():
                parent_logger.log(logging.INFO, 'Child No.{} completed.'.format(j))
                children[j] = None
                done_count += 1

    parent_logger.log(logging.INFO, 'All done.')
    q.put_nowait(None)

这是代码。它只是一个简单的表格布局。 这就是它在移动设备上的外观,我的细胞变小了。即使我调整了我的CSS上的宽度,也不会对它做出反应。

1 个答案:

答案 0 :(得分:1)

如果您想强制表格维持按预期显示的列,您可能需要考虑在CSS中使用!important规则作为宽度。

或者您可以像下面的示例一样使用white-space: nowrap;来强制列不插入在表开始以响应方式运行之前首先发生的断行。换句话说,在尝试将文本移动到第二行之前,您强制表变为响应。

&#13;
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
    td {
        white-space: nowrap;
    }
</style>
<div class="histlog col-md-12">
<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th class="hist1">One</th>
                <th class="hist2">Two</th>
                <th class="hist3">Three</th>
                <th class="hist4">Four</th>
                <th class="hist5">Five</th>
                <th class="hist6">Siz</th>
                <th class="hist7">Seven</th>
                <th>&nbsp;</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1asdfasdf</td>
                <td>2asdfasdfasdf</td>
                <td>3asdfasdfasdf</td>
                <td>4asdfasd</td>
                <td>5asdfasddf asdf as</td>
                <td>6wer wer we </td>
                <td>7asdf asdfwe </td>
                <td>8sdfds f sd</td>
            </tr>
        </tbody>
    </table>
</div>
&#13;
&#13;
&#13;