jjzjj

html - 带有 nowrap 溢出的表格单元格

coder 2023-08-07 原文

我正在使用 bootstrap，并想创建一个简单的 HTML table，在最后一列中我有一个 2 按钮组和一个单独的按钮。我希望最后一个单元格始终将这 3 个按钮保持在一行中，因此我添加了 text-nowrap Bootstrap 类(这是一个简单的 white-space: nowrap)。

如果其他单元格的内容足够长，最后一个单元格的内容会水平溢出，我不明白为什么。我希望表格的其余部分会缩小以为非环绕单元格腾出空间。

这是重现问题的演示:bootply

这是标记。

<div style="width: 500px">
  <table class="table table-striped">
    <tbody><tr>
      <td>Test text</td>
      <td class="text-nowrap">
        <div class="btn-group">
          <button class="btn btn-default"><span>A</span></button>
          <button class="btn btn-warning"><span>B</span></button>
        </div>
        <button class="btn btn-success"><span>C</span></button>
      </td>
    </tr>
  </tbody></table>
</div>

按钮组 div 和单独的 button 都是 inline-block 元素，因此包装应该按 IMO 预期的方式工作。我做错了什么？

也许这与 bootstrap 没有严格的关系。

更新

  • 我已经更新了 bootply，链接是以前的版本，抱歉
  • 在最新的 Chrome 和 IE 中进行了测试，两者的问题几乎相同。

原因和解决方法

  • 我意识到展开 btn-group 中的两个按钮会产生正确的布局，因此我开始研究 btn-group 的实际作用。
  • 我发现 btn-group 中的 btn 是 float 的，这种 float 导致了错误的布局。 在 btn-group 中添加一个 clearfix 类可以解决问题。 不，实际上没有，仍在研究中...
  • 我将研究为什么 Bootstrap 需要 float: left，似乎组中的按钮可以通过使用纯粹的 inline-block 无边距对齐。我将在 v4-alpha 代码中检查这一点，并将此问题报告给 bootstrap v3。

最佳答案

<table class="table">将填充其容器的 100% 宽度。列宽与其内容的宽度成比例地划分。

当左侧要求更大的部分时，按钮列将“变短”。

当左侧部分变小时，按钮列会变大，从而使按钮“向中心移动”。

解决方法: 将右侧列的宽度设置为固定值。所有三个按钮的组合宽度的总值:width:125px .如下图:

<div style="width: 500px">
  <table class="table table-striped">
    <tbody><tr>
      <td>Test text</td>
      <td class="text-nowrap" style="width:125px;">
        <div class="btn-group">
          <button class="btn btn-default"><span>A</span></button>
          <button class="btn btn-warning"><span>B</span></button>
        </div>
        <button class="btn btn-success"><span>C</span></button>
      </td>
    </tr>
  </tbody></table>
</div>

参见:http://www.bootply.com/PGL6xCDgMz

这会将按钮列的宽度设置为固定值 125px。因此，左侧列将保留剩余的任何部分。

更新 1:(根据提问者评论)

- 技巧 1: 

<div style="width: 500px">
  <table class="table table-striped">
    <tbody><tr>
      <td>Test text</td>
      <td class="text-nowrap">
        <table cellpadding="0" cellspacing="0">
          <tr>
            <td><button class="btn btn-default"><span>A</span></button></td>
            <td><button class="btn btn-warning"><span>B</span></button></td>
            <td><button class="btn btn-success"><span>C</span></button></td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody></table>
</div>

- 技巧 2: 

<div style="width: 500px">
  <table class="table table-striped">
    <tbody><tr>
      <td>Test text</td>
      <td><button class="btn btn-default"><span>A</span></button></td>
      <td><button class="btn btn-warning"><span>B</span></button></td>
      <td><button class="btn btn-success"><span>C</span></button></td>
    </tr>
  </tbody></table>
</div>

关于html - 带有 nowrap 溢出的表格单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38973633/

nowraphtmlgtltcodecsstwitter-bootstrap

有关html - 带有 nowrap 溢出的表格单元格的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  4. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  5. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  6. ruby-on-rails - Prawn - 表格单元格内的链接 - 2

    我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c

  7. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  8. ruby-on-rails - 带有 Zeus 的 RSpec 3.1，我应该在 spec_helper 中要求 'rspec/rails' 吗？ - 2

    使用rspec-rails3.0+，测试设置分为spec_helper和rails_helper我注意到生成的spec_helper不需要'rspec/rails'。这会导致zeus崩溃:spec_helper.rb:5:in`':undefinedmethod`configure'forRSpec:Module(NoMethodError)对thisissue最常见的回应是需要'rspec/rails'。但这是否会破坏仅使用spec_helper拆分rails规范和PORO规范的全部目的？或者这无关紧要，因为Zeus无论如何都会预加载Rails？我应该在我的spec_helper中做

  9. ruby - 单元测试文件 I/O 方法 - 2

    我对单元测试还是比较陌生。我用Ruby编写了一个类，它接受一个文件，在该文件中搜索给定的Regex模式，替换它，然后将更改保存回文件。我希望能够为此方法编写单元测试，但我不知道我将如何去做。有人能告诉我我们如何对处理文件i/o的方法进行单元测试吗？ 最佳答案 看看这个HowdoIunit-testsavingfiletothedisk?基本上这个想法是一样的，文件系统是你的类的依赖。所以引入一个可以在你的单元测试中模拟的角色/接口(interface)(这样你在单元测试时就没有依赖性)；角色中的方法应该是您从文件系统中需要的所有东西

  10. Ruby:如何使用带有散列的 'send' 方法调用方法？ - 2

    假设我有一个类A，里面有一些方法。假设stringmethodName是这些方法之一，我已经知道我想给它什么参数。它们在散列中{'param1'=>value1,'param2'=>value2}所以我有:params={'param1'=>value1,'param2'=>value2}a=A.new()a.send(methodName,value1,value2)#callmethodnamewithbothparams我希望能够通过传递我的哈希以某种方式调用该方法。这可能吗？ 最佳答案 确保methodName是一个符号，而

随机推荐