如何修复bootstrap col-lg-3的宽度
我包含了我的问题截图。 （“泰米尔语”的意思是“列”）。问题是，列是重叠的。
我使用了bootstrap选项卡，语言对齐是唯一的问题。
@font-face{
font-family: 'mytamil';
src: url('fonts/latha.ttf');
font-weight: normal;
font-style: normal;
}
.jumbotron {
background-image: url("images/homepage.jpg");
background-size: cover;
padding-top: 0;
}
.wrap > * {
display: inline-block;
vertical-align: middle;
}
marquee{
color: red;
}
#navbar > ul > li > a {
font-family: Georgia, serif;
font-size: 15px;
font-weight: bold;
}
.navbar-nav li a {
line-height: 50px;
}
.navbar select{
margin-top: 28px;
width: 90px;
}
.navbar {
background-color: transparent;
background: transparent;
border-color: transparent;
margin-top: 15px;
}
.tabbable > .responsive > ul > li > a{
text-transform: uppercase;
}
div.responsive ul{
background-color: whitesmoke;
}
.tabbable > .responsive, div.tab-content{
background-color: white;
}
.checkbox {
padding-left: 45px;
}
<style>
/* a few styles for the default page to make it presentable */
body {
margin-top: 20px;
}
.tabbable {
margin-bottom: 18px;
}
.tab-content {
padding: 15px;
border-bottom: 1px solid #ddd;
}
/* tab styles for small screen */
@media (max-width: 767px) {
body {
padding: 0;
}
.tabbable.responsive .nav-tabs {
font-size: 16px;
}
.tabbable.responsive .nav-tabs ul {
margin: 0;
}
.tabbable.responsive .nav-tabs li {
/* box-sizing seems like the cleanest way to make sure width includes padding */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
width: 100%;
height: 44px;
line-height: 44px;
padding: 0 15px;
border: 1px solid #ddd;
overflow: hidden;
}
.tabbable.responsive .nav-tabs > li > a {
border-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
/* include hover and active styling for links to override bootstrap defaults */
.tabbable.responsive .nav-tabs > li > a:hover {
border-style: none;
background-color: transparent;}
.tabbable.responsive .nav-tabs > li > a:active,
.tabbable.responsive .nav-tabs > .active > a,
.tabbable.responsive .nav-tabs > .active > a:hover {
border-style: none;
}
}
/* sample styles for the tab controls on small screens - start with left control and override for right */
.tabbable.responsive .nav-tabs > li > a.tab-control,
.tabbable.responsive .nav-tabs > li > span.tab-control-spacer {
float: left;
width: 36px;
height: 36px;
margin-top: 4px;
font-size: 56px;
font-weight: 100;
line-height: 26px;
color: #fff;
text-align: center;
background: #444;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
}
.tabbable.responsive .nav-tabs > li > a.tab-control.right,
.tabbable.responsive .nav-tabs > li > span.tab-control-spacer.right {
float: right;
}
.tabbable.responsive .nav-tabs > li > a.tab-control:hover {
color: #fff;
background: #444;
}
.tabbable.responsive .nav-tabs > li > span.tab-control-spacer {
line-height: 28px;
color: transparent;
background: transparent;
}
<div class="container">
<div class="tabbable responsive">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">வாடகை/குத்தகை வீடு</a></li>
<li><a href="#tab2" data-toggle="tab">வீடு வாங்குதல் / விற்பனை</a></li>
<li><a href="#tab3" data-toggle="tab">மனையிடம் வாங்குதல் / விற்பனை</a></li>
<li><a href="#tab4" data-toggle="tab">வணிகரீதியான வாடகை</a></li>
<li><a href="#tab5" data-toggle="tab">வணிகரீதியான வாங்குதல் / விற்பனை</a></li>
<li><a href="#tab6" data-toggle="tab">விளம்பரம்</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<div class="row">
<div class="col-lg-3">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c1" name="check" type="checkbox">
<label for="c1">
அடுக்குமாடிக் குடியிருப்பு
</label>
</div>
</div>
<div class="col-lg-3">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c2" name="check" type="checkbox">
<label for="c2">
மாளிகை
</label>
</div>
</div>
<div class="col-lg-3">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c3" name="check" type="checkbox" >
<label for="c3">
வளாகம்
</label>
</div>
</div>
<div class="col-lg-3">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c4" name="check" type="checkbox">
<label for="c4">
தனி
</label>
</div>
</div>
<div class="col-lg-3">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c5" name="check" type="checkbox">
<label for="c5">
பண்ணை
</label>
</div>
</div>
<div class="col-lg-3">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c6" name="check" type="checkbox">
<label for="c6">
வில்லா
</label>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab2">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c1" name="check" type="checkbox">
<label for="c1">
Apartment
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c2" name="check" type="checkbox">
<label for="c2">
Bungalow
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c3" name="check" type="checkbox" >
<label for="c3">
Compound
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c4" name="check" type="checkbox">
<label for="c4">
Independent
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c5" name="check" type="checkbox">
<label for="c5">
Form
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c6" name="check" type="checkbox">
<label for="c6">
Villa
</label>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab3">
</div>
<div class="tab-pane fade in" id="tab4">
</div>
<div class="tab-pane fade in" id="tab5">
</div>
</div> <!-- /tab-content -->
</div> <!-- /tabbable -->
</div>
</div>
</style>
如何解决宽度问题以及如何修复特定标签内容？
4 个答案:
答案 0 :(得分：1)
您可能希望在文本中使用CSS属性：
label{
word-break: break-all;
word-wrap: break-word;
}
它们应该有助于使文本适应列宽。 有关详情，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
答案 1 :(得分：1)
只需重新排列col-lg- *类的大小。我在下面的代码片段中提供了一个示例，请看一下。
对அடுக்குமாடிக் குடியிருப்பு和பண்ணை
对தனி
工作示例
＆＃13;
＆＃13;
＆＃13;
＆＃13;
@font-face {
font-family: 'mytamil';
src: url('fonts/latha.ttf');
font-weight: normal;
font-style: normal;
}
.jumbotron {
background-image: url("images/homepage.jpg");
background-size: cover;
padding-top: 0;
}
.wrap>* {
display: inline-block;
vertical-align: middle;
}
marquee {
color: red;
}
#navbar>ul>li>a {
font-family: Georgia, serif;
font-size: 15px;
font-weight: bold;
}
.navbar-nav li a {
line-height: 50px;
}
.navbar select {
margin-top: 28px;
width: 90px;
}
.navbar {
background-color: transparent;
background: transparent;
border-color: transparent;
margin-top: 15px;
}
.tabbable>.responsive>ul>li>a {
text-transform: uppercase;
}
div.responsive ul {
background-color: whitesmoke;
}
.tabbable>.responsive,
div.tab-content {
background-color: white;
}
.checkbox {
padding-left: 45px;
}
<style>
/* a few styles for the default page to make it presentable */
body {
margin-top: 20px;
}
.tabbable {
margin-bottom: 18px;
}
.tab-content {
padding: 15px;
border-bottom: 1px solid #ddd;
}
/* tab styles for small screen */
@media (max-width: 767px) {
body {
padding: 0;
}
.tabbable.responsive .nav-tabs {
font-size: 16px;
}
.tabbable.responsive .nav-tabs ul {
margin: 0;
}
.tabbable.responsive .nav-tabs li {
/* box-sizing seems like the cleanest way to make sure width includes padding */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
width: 100%;
height: 44px;
line-height: 44px;
padding: 0 15px;
border: 1px solid #ddd;
overflow: hidden;
}
.tabbable.responsive .nav-tabs>li>a {
border-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
/* include hover and active styling for links to override bootstrap defaults */
.tabbable.responsive .nav-tabs>li>a:hover {
border-style: none;
background-color: transparent;
}
.tabbable.responsive .nav-tabs>li>a:active,
.tabbable.responsive .nav-tabs>.active>a,
.tabbable.responsive .nav-tabs>.active>a:hover {
border-style: none;
}
}
/* sample styles for the tab controls on small screens - start with left control and override for right */
.tabbable.responsive .nav-tabs>li>a.tab-control,
.tabbable.responsive .nav-tabs>li>span.tab-control-spacer {
float: left;
width: 36px;
height: 36px;
margin-top: 4px;
font-size: 56px;
font-weight: 100;
line-height: 26px;
color: #fff;
text-align: center;
background: #444;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
}
.tabbable.responsive .nav-tabs>li>a.tab-control.right,
.tabbable.responsive .nav-tabs>li>span.tab-control-spacer.right {
float: right;
}
.tabbable.responsive .nav-tabs>li>a.tab-control:hover {
color: #fff;
background: #444;
}
.tabbable.responsive .nav-tabs>li>span.tab-control-spacer {
line-height: 28px;
color: transparent;
background: transparent;
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="tabbable responsive">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">வாடகை/குத்தகை வீடு</a></li>
<li><a href="#tab2" data-toggle="tab">வீடு வாங்குதல் / விற்பனை</a></li>
<li><a href="#tab3" data-toggle="tab">மனையிடம் வாங்குதல் / விற்பனை</a></li>
<li><a href="#tab4" data-toggle="tab">வணிகரீதியான வாடகை</a></li>
<li><a href="#tab5" data-toggle="tab">வணிகரீதியான வாங்குதல் / விற்பனை</a></li>
<li><a href="#tab6" data-toggle="tab">விளம்பரம்</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<div class="row">
<div class="col-lg-4">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c1" name="check" type="checkbox">
<label for="c1">
அடுக்குமாடிக் குடியிருப்பு
</label>
</div>
</div>
<div class="col-lg-3">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c2" name="check" type="checkbox">
<label for="c2">
மாளிகை
</label>
</div>
</div>
<div class="col-lg-3">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c3" name="check" type="checkbox">
<label for="c3">
வளாகம்
</label>
</div>
</div>
<div class="col-lg-2">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c4" name="check" type="checkbox">
<label for="c4">
தனி
</label>
</div>
</div>
<div class="col-lg-4">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c5" name="check" type="checkbox">
<label for="c5">
பண்ணை
</label>
</div>
</div>
<div class="col-lg-3">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c6" name="check" type="checkbox">
<label for="c6">
வில்லா
</label>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab2">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c1" name="check" type="checkbox">
<label for="c1">
Apartment
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c2" name="check" type="checkbox">
<label for="c2">
Bungalow
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c3" name="check" type="checkbox">
<label for="c3">
Compound
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c4" name="check" type="checkbox">
<label for="c4">
Independent
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c5" name="check" type="checkbox">
<label for="c5">
Form
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c6" name="check" type="checkbox">
<label for="c6">
Villa
</label>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab3">
</div>
<div class="tab-pane fade in" id="tab4">
</div>
<div class="tab-pane fade in" id="tab5">
</div>
</div>
<!-- /tab-content -->
</div>
<!-- /tabbable -->
</div>
</div>
答案 2 :(得分：0)
泰米尔语文本与您的问题无关。只需将col-lg-3更改为col-lg-4。
<div class="col-lg-4">
<div class="checkbox checkbox-info checkbox-circle">
<input id="c1" name="check" type="checkbox">
<label for="c1">
அடுக்குமாடிக் குடியிருப்பு
</label>
</div>
</div>
答案 3 :(得分：0)
计算lg
如果你将col-lg-3放在四个col-lg-3之后，A页可以在同一行中包含最多col-lg-12，即四个col-lg-3或三个col-lg-4 ，它不应该大于或等于12.在你的情况下，每三个col-lg-4 div之前你可以放一个bootstrap cleafix类。
<div class="clearfix"></div>
相关问题
- 表单输入的宽度（使用col-lg）
- Bootstrap 3.3以特定宽度将col-lg-10扩展为col-lg-12
- 为什么我的col-lg-不显示全宽？
- col-sm-push影响col-lg设置
- Bootstrap col-lg较低的宽度
- bootstrap：如何从col-lg中删除填充？
- 我是否需要指定col-lg-12 col-md-12 col-sm-12 col-xs-12才能在所有设备中获得100％的宽度？
- 如何使用bootstrap在col-lg-3中完成100％行（设备宽度）
- 如何修复bootstrap col-lg-3的宽度
- 由lg col覆盖的Bootstrap md col
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？