html - 如何在 bootstrap col-lg-3 上固定宽度

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