Bootstrap -更改可见性时一组复选框的布局间距换行
Bootstrap是一个流行的前端开发框架，它提供了一套用于快速构建响应式网页和Web应用程序的工具和组件。在Bootstrap中，更改可见性时一组复选框的布局间距换行可以通过使用Bootstrap的Grid系统和CSS类来实现。
首先，我们可以使用Bootstrap的Grid系统来创建一个包含复选框的行。Grid系统将页面水平划分为12个列，我们可以使用这些列来布局我们的复选框。例如，我们可以使用以下代码创建一个包含3个复选框的行：
<div class="row">
<div class="col-md-4">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">复选框1</label>
</div>
<div class="col-md-4">
<input type="checkbox" id="checkbox2">
<label for="checkbox2">复选框2</label>
</div>
<div class="col-md-4">
<input type="checkbox" id="checkbox3">
<label for="checkbox3">复选框3</label>
</div>
</div>在上面的代码中，我们使用row类创建了一个行，并在行内使用col-md-4类将每个复选框包装在一个占据4个列的容器中。这样，每个复选框都会占据页面的1/3宽度。
如果我们想要在更改可见性时使复选框换行，我们可以使用Bootstrap的CSS类来实现。例如，我们可以使用d-md-block类来在中等屏幕大小及以上显示复选框，并使用d-md-none类在中等屏幕大小及以下隐藏复选框。这样，当屏幕尺寸较小时，复选框将自动换行。
下面是示例代码：
<div class="row">
<div class="col-md-4 d-md-block d-md-none">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">复选框1</label>
</div>
<div class="col-md-4 d-md-block d-md-none">
<input type="checkbox" id="checkbox2">
<label for="checkbox2">复选框2</label>
</div>
<div class="col-md-4 d-md-block d-md-none">
<input type="checkbox" id="checkbox3">
<label for="checkbox3">复选框3</label>
</div>
</div>在上面的代码中，我们在每个复选框的容器上添加了d-md-block d-md-none类。这样，当屏幕尺寸较小时，复选框将隐藏，当屏幕尺寸较大时，复选框将显示，并且会自动换行。
推荐的腾讯云相关产品和产品介绍链接地址：
相关·内容
我有以下使用Bootstrap的场景。
问题是，当我更改第一个复选框的可见性时，它会破坏布局的间距。我构建的HTML很糟糕吗？或者我在这里遗漏了一些特性
浏览 10提问于2016-07-14得票数 0
我正在尝试做一些div的水平布局，但是在div之后得到了不想要的“边距”。我使用的是最新的Chrome浏览器。
浏览 0提问于2012-09-06得票数 1
回答已采纳
可能重复：
if (breakCheck.isChecked()) { ll.invalidate;
}
我正在尝试在选中TextView时使checkBox出现，然后
浏览 5提问于2013-02-03得票数 0
我设置在我的活动布局中的父LinearLayout中。然后，当另一个setVisibility(View.VISIBLE)或setVisibility(View.GONE)被选中或未选中时，我在包含一些checkBoxes的子LinearLayout上执行一个可见性变化不是动画化的。父ScrollView中有一个LinearLayout。这是在Android6.0.1上使用来自v23.2.
浏览 2提问于2016-03-05得票数 2
回答已采纳
我正在开始我的第一个WP8项目，但遇到了一个问题。我正在设计的控件的高度是48px，但Checkbox控件似乎有一个填充，使它无法在小于75px的空间上正确显示。对吗？如果不是，如何使复选框缩小并正确显示？很难从图片中辨别出来，但是页边距和填充都设置为0。
浏览 5提问于2013-07-06得票数 1
回答已采纳
问题描述:如果bootstrap.css中存在用于加载字形图标字体文件的font-face-statement，则页面布局会有一点损坏。在windows手机上，这是很好的。如果我第一次加载页面，布局是正常的！如果我重新加载页面或更改页面:出现奇怪的问题并保留！(->缓存？)
按钮组垂直于字形图标。带有text @ footer的按钮。(右侧的<
浏览 0提问于2016-11-26得票数 0
1回答
更新7-10-15
我试图使用一组复选框来控制数据序列在多个地块中的可见性。我看了几个例子，使用可见性选项，在这里的图片，网站和其他问题，但我发现到目前为止，我发现要么集中在一个单一的图表，或在我需要的细节有限。我的第一个想法是让复选框更改可见性值，然后重新绘制图表，但是我很快意识到，可见性只是恢复到我在创建图表时设置的初始条件
浏览 0提问于2015-07-07得票数 0
2回答
隐藏部分面板C#
、、
关于我在C#实现中遇到的一个问题，我有一个问题。我想要“隐藏”我的面板的一部分，如果用户选中一个复选框(或类似的东西)，面板的这个隐藏部分应该会显示出来。我想要的是在Windows中用来做这类事情的东西。就像当你在“我的电脑”中，你可以在左边的面板中看到多个选项，一个小的“三角形”表示还有更多的东西要显示。我有像10-15文本框显示，如果用户选中复选框。我的第一个
浏览 1提问于2012-03-21得票数 2
我想在按下按钮后将图像视图的可见性更改为可见。我正在使用一个可扩展的listview，每次我试图改变imageview的可见性时，我都会得到空指针异常。我正在用findViewById查找图像视图，一切都在编译中，但当我试图实际更改图像视图的可见性时，我崩溃了。以编程方式改变文本视图/图像视图是列表视图布局的一部分吗？如果是这样，你能解
浏览 1提问于2014-06-16得票数 0
在我的应用程序中，用户可以启用一个在Y/X时做X的服务。这需要在任何时候都打开，但是当应用程序更新时，Android当然会关闭这个服务。现在的问题是，我所做的复选框和布局更改(按钮切换、可见性等)保持不变。
我的应用程序的布局依赖于SharedPreferences，因此需要更新以对布局进行更改。另外，我如何通知我<e
浏览 1提问于2014-07-15得票数 1
回答已采纳
我定义了以下布局，其中包含TextView、CheckBox和ProgressBar。我有两个问题：-请在下面找到布局，我是android的新手。 android:layout_c
浏览 1提问于2012-02-03得票数 0
回答已采纳
1回答
我有一个具有自定义列表项布局和该布局的选择状态的ListView，并且在项目布局中有一个checkbox，问题是，当在布局中显示时，复选框正在避免列表项是selected，但是当我将项目的可见性更改为goneof checkbox时，项目的布局响应于selectors。
浏览 1提问于2013-10-22得票数 0
回答已采纳
我有可以选中的复选框。但是，如果选中了这些选项，如果屏幕方向发生了变化，我希望将它们全部取消选中。我该如何着手做这样的事情呢？
浏览 39提问于2017-02-23得票数 0
它们在缩放时不会将文本重新换行到屏幕上。相反，文本会继续显示在需要水平滚动的页面之外。举个例子，对比一下在Chrome/Safari和Firefox上缩放Bootstrap主页上的文本--在Firefox上，当由于缩放导致菜单文本没有足够的空间时，即使是响应式菜单栏也能正常工作。这似乎是基于像素布局的已知Webkit“功能”，可以通过使用基于em的宽度来解决，这在标准Bootstrap中看
浏览 2提问于2013-02-25得票数 5
2回答
我有一个在复选框被选中时发生的精灵动画(使用:checked伪--所以实际上是'if‘复选框被选中)。我有一个640px的断点，它隐藏了复选框。问题是，当页面调整到小于640px宽时，并且复选框已被选中，动画就会播放。我只希望动画作为用户选中复选框的结果而发生。我正在尝试制作两个菜单，一个用于移动布局，另一个用于桌面。对于移动布局，我希望菜单是可切换<e
浏览 20提问于2020-07-03得票数 1
回答已采纳
3回答
我有一个小小的Bootstrap/Font-可怕的警报，看起来如下：它的HTML看起来如下(我内联自定义CSS只是为了问我的问题)： <p style="overflow: hidden;">{{ $discount }}</p>
</div
浏览 6提问于2016-02-23得票数 0
回答已采纳
如果我隐藏了一些小部件，QVBoxLayout中就会保留一些空白，我不想要这个不必要的空间。在底部增加垫片并不能解决这个问题。设置边距间距也是一样的。它就像隐藏的小部件占用了一些空间。
浏览 9提问于2022-01-26得票数 0
回答已采纳
我在确定复选框和与之相关的文本之间的间距时遇到了麻烦。我的google galaxy nexus显示了以下内容：我的galaxy s2显示如下：我的布局很简单： android:layout_widthstring/edit_profile_email"
style="@style/Theme.CheckBoxH
浏览 2提问于2013-03-07得票数 4
回答已采纳
1回答
我一直试图不问堆栈溢出的基本问题，但我在互联网上找不到与这个问题相关的线索。 我希望让我的UILabel在我的小部件(Today Extension)中显示多行。它一直只显示一行带有“...”的行。最后。 有人知道如何解决这个问题吗？我会附上一些截图来进一步解释我的问题。 ? ?
浏览 43提问于2019-10-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
