Question

我包含了我的问题截图。（“泰米尔语”的意思是“列”）。问题是，列是重叠的。

我使用了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>

如何解决宽度问题以及如何修复特定标签内容？

Answer 1

您可能希望在文本中使用CSS属性：

label{
  word-break: break-all;
  word-wrap: break-word;
}

它们应该有助于使文本适应列宽。有关详情，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

Answer 2

只需重新排列col-lg- *类的大小。我在下面的代码片段中提供了一个示例，请看一下。

对அடுக்குமாடிக் குடியிருப்பு和பண்ணை

使用col-lg-4

对தனி

使用col-lg-2

工作示例

＆＃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;
}

＆＃13;

<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>

＆＃13;

Answer 3

泰米尔语文本与您的问题无关。只需将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>

Answer 4

计算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>

如何修复bootstrap col-lg-3的宽度

4 个答案: