当我只能访问CSS (无法更改HTML)时，如何在引导中更改列宽度？

Question

<div class="col-12 col-md-7">column md-7</div>
<div class="col-12 col-md-1">spacer md-1</div>
<div class="col-12 col-md-4">column md-4</div>

我自愿为一个关于可访问性的会议在一页上做一些工作。组织者使用了一个“拖放”页面构建器，但是它没有编辑子页面的能力。他们需要修改的页面在md-7栏中有少量内容，但是扬声器bios的大部分文本都在md-4列中，看起来太窄了。他们要求我使用“添加自定义CSS功能”来调整列的宽度。

​

​

所以我的问题是如何只使用CSS来增加第三列的宽度。我尝试了以下几点：

.col-12.col-md-7 { max-width:30%; }
.col-12.col-md-4 { flex-grow:5 !important; }
.col-12.col-md-4 { max-width:70% !important; }

它在普通屏幕上很好地扩展了第三列，但在移动屏幕上却分崩离析，因为30%的宽度对于第一列来说太小了。

Answer 1

..and在普通屏幕上很好地扩展了第三列，但由于30%的宽度对于第一列来说太小，在移动上就会分崩离析。

也许我误解了这个问题，但是你不能仅仅使用媒体查询吗？BS4在其他媒体查询中使用这些定义(包括您的CSS )：

@media (min-width: 1200px) {
  .col-12.col-md-7 { max-width:30%; }
  .col-12.col-md-4 { flex-grow:5 !important; }
  .col-12.col-md-4 { max-width:70% !important; }
}

@media (min-width: 576px) {
  .col-12.col-md-7 { max-width: 60%; } /* perhaps 60% fits better */
  .col-12.col-md-4 { flex-grow:5 !important; } /* change other classes accordingly */
  .col-12.col-md-4 { max-width:70% !important; }
}

Answer 2

如果不想使用内联css，可以为所有列分别定义一个类。然后，您可以选择并用css替换任何列。这种方法有点费劲。如果您希望它在移动视图中更改，则必须使用@media，因此您必须使用此方法，并将每个方法按您希望它的大小分别排列。

Html：

<div class="col-12 col-md-7 my-col1">column md-7</div>
<div class="col-12 col-md-1 my-col2">spacer md-1</div>
<div class="col-12 col-md-4 my-col3">column md-4</div>

Css：

.my-col3 {
   // what if you want to
 }

如果希望仅使用css以外的引导程序解决大小问题，则需要更详细地查看列属性。您可以指定在大小上占用多少空间，因此不必添加css属性。当您这样做时，还可以利用引导响应特性来调整移动和平板的外观。简而言之，根据列的尺寸调整响应将是一种更合乎逻辑的做法。

Answer 3

您可以将整个过程封装在一个container-fluid中，然后为每个列定义一个新的类。然后更改css中列的宽度，并使用@media查询来定义媒体断点中的转换。