Question

我使用Bootstrap CSS跟踪HTML。

<div class="row">
  <div class="col-sm-4" style="min-width: 66px;">Name</div>
  <div class="col-sm-1" style="min-width: 120px;">Instance name</div>
  <div class="col-sm-7" style="min-width: 87px;">Due date</div>
</div>

如果没有'min-width'，则在某些情况下，第二列的宽度小于120px，并且“实例名称”不完全可见。所以我添加了'min-width'，在这种情况下，行的宽度变得超过100％。最后一列被包装成新行。

我希望有自举动态列宽，并且当我减少浏览器窗口大小时，实例名称不会消失。我怎样才能实现这种行为？

Answer 1

不确定是否有这样的方法可以达到你想要的效果。

foreach($cals as $cal){ $optParam = array( 'singleEvents' => TRUE ); $events = $service->events->listEvents($cal->id, $optParam); while(true) { $eventArray = array(); foreach ($events->getItems() as $event) { if($event->getStatus != 'cancelled'){ {RETRIEVE DATA} } } $pageToken = $events->getNextPageToken(); if ($pageToken) { $optParams = array( 'pageToken' => $pageToken ); $events = $service->events->listEvents($cal->id, $optParams); } else { break; } }定义视口的特定宽度百分比，如果提供自定义值，则所有列的累积宽度将大于或小于100％，这不是所需的行为。

相反，您可以为同一个div提供多个类。例如：

col-sm-x

如果这是解决方案还不够，那么你很可能会想出一些手动设置其他div的宽度的javascript解决方案。

似乎还有另一个类似的问题，此前发布在stackoverflow上。看看here。

Bootstrap Grid on W3Schools

Answer 2

您是否尝试更改较小分辨率的值？例如

  <div class="col-lg-4 col-sm-4">Name</div>
  <div class="col-lg-1 col-sm-2">Instance name</div>
  <div class="col-lg-7 col-sm-6">Due date</div>

Bootstrap具有不同屏幕尺寸的选项，因此您可能需要查看它们：http://getbootstrap.com/css/

Answer 3

Bootstrap列是弹性项目。当其他列达到最小宽度时，您必须决定哪一列应该缩小。

对于你的例子，我选择了最后一个，“截止日期”，通常应该是列-sm-7。我将它减少到col-sm-1但是给它灵活增长，我们必须覆盖bootstraps max-width属性。

<div class="row">
  <div class="col-sm-4" style="min-width: 66px;">Name</div>
  <div class="col-sm-1" style="min-width: 120px;">Instance name</div>
  <div class="col-sm-1" style="min-width: 87px; flex-grow: 1; max-width:100%; ">Due date</div>
</div>

这是我制作的一个漂亮的代码：https://codepen.io/timar/pen/VQWmQq/

还可以给它一个非固定的列class =“col”，它不需要覆盖flex-grow和max-width属性。

Bootstrap网格系统中列的最小宽度

3 个答案: