当前位置: 首页 > 知识库问答 >
问题:

防止引导表大于跨度

查飞星
2023-03-14

下面是通常动态生成的内容。在页面的主要部分有一个< code >

  1. 为什么一个表可以变得比 div 类 = spanX 更宽?我一直认为,块元素采用其父元素的宽度?
  2. 表的相应 td 中的字符/空格数可能会有所不同。如何防止桌子长得比 div 宽?当然,我可以动态检查ts中的字符数,但是我如何处理这些信息?

http://jsfiddle.net/vNnc6/

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>MySite</title>
<meta name="author" content="me"/>

<link href="static/css/bootstrap.css" rel="stylesheet">
<link href="static/css/bootstrap-responsive.css" rel="stylesheet">
<link href="static/profhase.css" rel="stylesheet">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="static/bootstrap/js/bootstrap.js"></script>


<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </a>

    <ul class="nav">
      <li><a class="brand" href="profhase">MyBrand</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Blog</a></li>
    </ul>

      <div class="nav pull-right collapse nav-collapse" style="hight: 0px">
        <ul class="nav collapse nav-collapse">
          <li><p class="navbar-text">Apps: </p></li>
          <li><a href="firstapp/">AppOne <i class="icon-lock"></i></a></li>
        </ul>
      </div>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="row">
      <div class="span2">
    <p>
      My Wonderful sidebar
    </p>
      </div>
      <div class="span6" style="background:red;">
    <table class="table">
      <tbody>
        <tr>
          <th>Header1</th>
          <th>Header2</th>
          <th>Header3</th>
          <th>Header4</th>
          <th>Header5</th>
          <th>Header6</th>
        </tr>

        <tr>
          <td>My first Test</td>
          <td>My second Test</td>
          <td>My third Test</td>
          <td>My fifth Test</td>
          <td>My lalalalalong long lelong long long Test</td>

          <td>
        <div class="btn-group">
          <a class="btn dropdown-toggle" data-toggle="dropdown">
            Dropdown Choices <span class="caret"></span>
          </a>

          <ul class="dropdown-menu">
            <li><a id=1>First wonderful choice</a></li>
          </ul>

        </div>
          </td>
        </tr>
      </tbody>
    </table>
      </div>
    </div>
  </div>

</body>

共有2个答案

欧阳鸿德
2023-03-14

>

  • 我注意到span6的父级显示为table,但span6是浮动的。删除浮点数并将span6设置为show: table-cellworks: fiddle
    注意:在TB中可能有一个比span6*更合适的类,一个已经有show: table-cell的类。

    其他解决方案,但可能不是您想要实现的:“带有溢出的元素:隐藏;在浮动元素旁边”的技术:工作小提琴
    这种魔力的解释被命名为块格式化上下文(T. J. Koblentz'博客)-关于SO的问题

  • 薛宏壮
    2023-03-14

    感谢FelipeAls的回答,这段代码做到了:

    table {
        table-layout: fixed;
        word-wrap: break-word;
    }
    

    另一种可能性是不使用自动换行,而是使用类似...

    http://jsfiddle.net/zzmfA/

     类似资料:
    • 我正在尝试设计一个形式在一个面积的宽度Col-SM-8。表单中有三列:标签、文本输入和用户名检查。标签宽度为col-sm-2,用户名检查宽度为col-sm-1,其余为文本输入。我的计算是文本输入应该有5的宽度,但结果太难看了。我尝试手动将宽度设置为col-sm-7,但仍然不够长。如果我将文本输入的宽度设置为col-sm-8,那么我会在网页底部看到滚动条。我的目标是1。将标签宽度设置为左侧的col-

    • 目前,api看起来像:- 员工详情:- 所以问题是要避免xss攻击 例如,如果它是这段代码

    • 问题内容: 这是一个非常常见的问题,但我尚未找到我要寻找的确切问题和答案。 我有一个表,该表具有指向其自己的PK的FK,以启用任意深度的层次结构,例如经典的tblEmployee,它的列是带有PK tblEmployee.EmployeeID的FK。 假设在我的应用中,用户 创建新员工Alice和Dave,没有经理,因为他们是CEO和总裁。这两个记录的NULL也是如此。 创建新员工Bob,并以Al

    • 问题内容: 在开发过程中,本地WAMP服务器如何从测试服务器获取最新数据是对数据库进行了转储,然后使用source命令上载该转储以加载.sql文件。 最近,在导入的最后,我们遇到了有关@old变量的错误,这些变量在更改原始设置(如外键约束)之前存储了这些设置(因此请关闭外键约束,以使导入不会在以下情况下引发错误)它会重新创建表,并在尚未创建表之一时尝试创建外键。我发现原因是产品表获取越来越多的数据

    • 我序列化一个对象并将其保存为我的硬盘上的文件。当我阅读它时,只有在某些情况下它会抛出EofException。经过几个小时的调试,我无法找到一个问题。 下面是我的代码: 问题:我的序列化对象现在被破坏了,然后它现在是垃圾吗? 因为这个对象负责呈现用户保存的UI。如果用户登录,它应该呈现以前保存的UI状态。但是,对于某些用户,文件无法反序列化。