如何使包裹的div扩展到全宽
我有以下用户界面：
当我使窗口变薄时，div的包装可以容纳，如下所示：
我希望发生的事情是当它包装好之后，div会扩展到100％的可用宽度。
实际的“ div.row”在浏览器中是100％的宽度，因此它们是正确的，但是“ div.col-md-6”保持在最小宽度设置，因此我关注的是它们。
问题：如何使包裹的div扩展到100％的宽度？
这是HTML，仅使用引导CSS：
<fieldset>
<legend>Report Parameters</legend>
<div class="container" style="width: 100%; max-width: none;">
<div class="row">
<div class="col-md-6" style="padding: 0; min-width: 554px;">
<div class="panel panel-default" style="margin: 10px 10px 10px 10px; height: 470px;">
<div class="panel-heading">
<span class="font-bold font-medium">Timelapse Templates</span>
</div>
<div class="panel-body">
<span>Please select a template:</span>
<div class="feed-activity-list" style="display: block;">
<div id="GridTLTemplates"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6" style="padding: 0; min-width: 554px;">
<div class="tlTemplateDetail" style="height: 494px;">
<div class="panel panel-default" style="margin-top:0px;">
<div class="panel-heading">
<span class="font-bold font-medium">Timelapse Template Detail</span>
</div>
</div>
<div class="panel panel-default" style="">
<div class="feed-activity-list">
<label class="control-label nowrap sectionTitle">Template Name:</label>
<div style="padding: 5px;">
<input type="text" id="tbxTemplateName" />
</div>
</div>
</div>
<div class="panel panel-default" style="">
<div class="feed-activity-list">
<label class="control-label nowrap sectionTitle">Based-on Saved Query:</label>
<div style="padding: 5px;">
<div id="basedOnQueryContainer">
<div class="e-tab-header">
<div>My Queries </div>
<div>Public Queries </div>
</div>
<div class="e-content">
<div>
<div id='GridMyQueries'></div>
</div>
<div>
<div id='GridPublicQueries'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6" style="padding: 0; min-width: 554px;">
<div class="container" style="width: 100%; max-width: none; padding: 0;">
<div class="row" style="margin: 0;">
<div class="col-md-3" style="padding: 0; min-width: 277px; width: 50%">
<div class="tlTemplateDetail">
<div class="panel panel-default" style="margin:0;">
<div class="feed-activity-list" style="height: 270px;">
<label class="control-label nowrap sectionTitle">Select an interval:</label>
<div style="padding: 5px; text-align: center;">
<div style="text-align: left;">
<table>
<tr>
<td>
<input type="radio" id="rbnIntervalHour" />
</td>
</tr>
<tr>
<td>
<input type="radio" id="rbnIntervalDay" />
</td>
</tr>
<tr>
<td>
<input type="radio" id="rbnIntervalWeek" />
</td>
</tr>
<tr>
<td>
<input type="radio" id="rbnIntervalMonth" />
</td>
</tr>
<tr>
<td>
<input type="radio" id="rbnIntervalYear" />
</td>
</tr>
</table>
</div>
<br />
<div style="display: inline-block; padding-top: 10px; text-align: center;">
<span style="padding-top: 30px;">Each interval will create a frame in the <span style="white-space: pre">time-lapse</span> map.</span>
</div>
<br />
<div style="display: inline-block; padding-top: 10px; text-align: center;">
<span style="margin-top: 25px;">Week = Sunday to Saturday</span>
<br />
<span>Month = Calendar month</span>
<br />
<span>Year = Calendar year</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3" style="padding: 0; min-width: 277px; width: 50%">
<div class="tlTemplateDetail">
<div class="panel panel-default" style="margin:0;">
<div class="feed-activity-list" style="height: 270px;">
<label class="control-label nowrap sectionTitle">Select date period:</label><br />
<div style="padding: 5px;">
<table>
<tr>
<td>
<input type='radio' id='rbnDatePeriodFixed' />
<div id="DatePeriodDetailFixed" style="display: none; padding: 2px; border: 1px solid #e9e9e9; border-radius: 8px; -moz-border-radius: 8px; width: 100%; margin: 2px;">
<table>
<tr>
<td>
<input id='dpFixedDateStart' type="text" />
</td>
</tr>
<tr>
<td>
<input id='dpFixedDateEnd' type="text" />
</td>
</tr>
<tr>
<td>
<span>Dates will be adjusted to fit the selected interval</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<input type='radio' id='rbnDatePeriodCumulative' />
<div id="DatePeriodDetailCumulative" style="display: none; padding: 2px; border: 1px solid #e9e9e9; border-radius: 8px; -moz-border-radius: 8px; width: 100%; margin: 2px;">
Blah blah blah
</div>
</td>
</tr>
<tr>
<td>
<input type='radio' id='rbnDatePeriodRolling' />
<div id="DatePeriodDetailRolling" style="display: none; padding: 2px; border: 1px solid #e9e9e9; border-radius: 8px; -moz-border-radius: 8px; width: 100%; margin: 2px;">
<table>
<tr>
<td>
<label>Number of Intervals:</label>
</td>
</tr>
<tr>
<td>
<input id="nbxRollingDate" type="text" />
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6" style="padding: 0; min-width: 554px;">
<div class="container" style="width: 100%; max-width: none">
<div class="row">
<div class="col-md-3" style="padding: 0; min-width: 277px; width: 50%">
<div class="tlTemplateDetail ">
<div class="panel panel-default" style="margin:0;">
<div class="feed-activity-list" style="height: 270px;">
<label class="control-label nowrap sectionTitle">Select a geographic grouping:</label><br />
<div style="padding: 5px;">
<table>
<tr>
<td>
<input type="radio" id="rbnGeoGroupingState" />
</td>
</tr>
<tr>
<td>
<input type="radio" id="rbnGeoGroupingCounty" />
</td>
</tr>
<tr>
<td>
<input type="radio" id="rbnGeoGroupingZipCode3" />
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3" style="padding: 0; min-width: 277px; width: 50%">
<div class="tlTemplateDetail ">
<div class="panel panel-default" style="margin:0;">
<div class="feed-activity-list" style="height: 270px;">
<label class="control-label nowrap sectionTitle">Map Options:</label>
<div style="padding: 5px;">
<table>
<tr>
<td>
<input type="checkbox" id="tlMapOptionsAccumCounts" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="tlMapOptionsShowCounts" />
</td>
</tr>
<tr>
<td>
<div style="padding: 2px; border: 1px solid #e9e9e9; border-radius: 8px; -moz-border-radius: 8px; width: 100%; margin: 2px;">
<table>
<tr>
<td>
<label style="white-space: normal;">Seconds to display each map frame:</label>
</td>
</tr>
<tr>
<td>
<input id="nbxFrameRate" type="text" />
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
2 个答案:
答案 0 :(得分：1)
您还需要为小型设备放置类（md用于中型设备，sm用于小型设备） 如果您想在小屏幕上显示整个div，请添加class col-sm-12
答案 1 :(得分：1)
使用$ ./bin/getline_file dat/captnjack.txt
This is a tale
Of Captain Jack Sparrow
A Pirate So Brave
On the Seven Seas.
。转到“检查元素”，并准确检查更改发生在哪个屏幕尺寸上。
例如，如果像素为500px，则执行以下操作：
media query因此，当任何东西低于500px或另一种思考方式，当某事物低于500px时，@media screen and (max-width: 500px) {
#div_name {
width: 100%;
}
}
的宽度变为100％。
尝试一下，看看是否适合您。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？