如何增加bootstrap卡的宽度并移至顶部

时间:2017-10-27 09:46:27

标签: twitter-bootstrap

嗨我用我的表单元素设计了自举卡,因为更多的表单元素引导卡掉落而我无法看到某些表单 如何增加卡的宽度或者我应该如何移动到更高的位置以获得我所有的表单元素我已经将col-lg-20放在卡的顶部但是它不起作用

小提琴https://jsfiddle.net/wb8vpbc3/

<div class="col-lg-20">
            <div class="login-box card">            
            <div class="card-body">
                <form class="form-horizontal form-material" id="loginform" action="index.html">
                    <h3 class="box-title m-b-20">Set up your company</h3>
                    <div class="form-group ">
                        <div class="col-xs-12">
                            <input class="form-control" type="text" required="" placeholder="Company Name"> </div>
                    </div>


                                 <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <!-- <label class="control-label">Category</label> -->
                                                    <select class="form-control custom-select" data-placeholder="Choose a Category" tabindex="1">
                                                        <option value="Category 1">--Select Company Type--</option>
                                                        <option value="Category 2">Category 2</option>
                                                        <option value="Category 3">Category 5</option>
                                                        <option value="Category 4">Category 4</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <!--/span-->

                                        </div>

                   <div class="form-group ">
                        <div class="col-xs-12">
                            <input class="form-control" type="text" required="" placeholder="Company Official website"> </div>
                    </div>


                                 <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <!-- <label class="control-label">Category</label> -->
                                                    <select class="form-control custom-select" data-placeholder="Choose a Category" tabindex="1">
                                                        <option value="Category 1">--Select Phone Type--</option>
                                                        <option value="Category 2">Category 2</option>
                                                        <option value="Category 3">Category 5</option>
                                                        <option value="Category 4">Category 4</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <!--/span-->                                   
                                        </div>


                                                <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label></label>
                                                    <input type="text" class="form-control">
                                                </div>
                                            </div>
                                            <!--/span-->
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Ext</label>
                                                    <input type="text" class="form-control">
                                                </div>
                                            </div>
                                            <!--/span-->
                                        </div>


                                                <div class="form-group">
                                                <div class="col-md-6">
                                                    <label class="control-label">Employees</label>
                                                    <div class="form-check">
                                                        <label class="custom-control custom-radio">
                                                            <input id="radio1" name="radio" type="radio" checked class="custom-control-input">
                                                            <span class="custom-control-indicator"></span>
                                                            <span class="custom-control-description"> 0 - 50</span>
                                                        </label>
                                                        <label class="custom-control custom-radio">
                                                            <input id="radio2" name="radio" type="radio" class="custom-control-input">
                                                            <span class="custom-control-indicator"></span>
                                                            <span class="custom-control-description">50 - 100</span>
                                                        </label>
                                                         <label class="custom-control custom-radio">
                                                            <input id="radio2" name="radio" type="radio" class="custom-control-input">
                                                            <span class="custom-control-indicator"></span>
                                                            <span class="custom-control-description">100 - 250</span>
                                                        </label>
                                                         <label class="custom-control custom-radio">
                                                            <input id="radio2" name="radio" type="radio" class="custom-control-input">
                                                            <span class="custom-control-indicator"></span>
                                                            <span class="custom-control-description">250 - 500</span>
                                                        </label>
                                                         <label class="custom-control custom-radio">
                                                            <input id="radio2" name="radio" type="radio" class="custom-control-input">
                                                            <span class="custom-control-indicator"></span>
                                                            <span class="custom-control-description">500 - 1000</span>
                                                        </label>
                                                         <label class="custom-control custom-radio">
                                                            <input id="radio2" name="radio" type="radio" class="custom-control-input">
                                                            <span class="custom-control-indicator"></span>
                                                            <span class="custom-control-description">above 1000</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>


                    <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <div class="card">
                            <div class="card-body">                      
                                <input type="file" id="input-file-now" class="dropify" />
                            </div>
                        </div>
                    </div>                  
                </div>

                <p>Please enter your company mailing address and different branches your are located at :</p>

                 <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <!-- <label class="control-label">Category</label> -->
                                                    <select class="form-control custom-select" data-placeholder="Choose a Category" tabindex="1">
                                                        <option value="Category 1">--Address type--</option>
                                                        <option value="Category 2">Category 2</option>
                                                        <option value="Category 3">Category 5</option>
                                                        <option value="Category 4">Category 4</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <!--/span-->

                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <!-- <label class="control-label">Category</label> -->
                                                    <select class="form-control custom-select" data-placeholder="Choose a Category" tabindex="1">
                                                        <option value="Category 1">--Select Country--</option>
                                                        <option value="Category 2">Category 2</option>
                                                        <option value="Category 3">Category 5</option>
                                                        <option value="Category 4">Category 4</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <!--/span-->

                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <!-- <label class="control-label">Category</label> -->
                                                    <select class="form-control custom-select" data-placeholder="Choose a Category" tabindex="1">
                                                        <option value="Category 1">--Select State--</option>
                                                        <option value="Category 2">Category 2</option>
                                                        <option value="Category 3">Category 5</option>
                                                        <option value="Category 4">Category 4</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <!--/span-->

                                        </div>

                                            <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <!-- <label class="control-label">Category</label> -->
                                                    <select class="form-control custom-select" data-placeholder="Choose a Category" tabindex="1">
                                                        <option value="Category 1">--Select City--</option>
                                                        <option value="Category 2">Category 2</option>
                                                        <option value="Category 3">Category 5</option>
                                                        <option value="Category 4">Category 4</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <!--/span-->

                                        </div>

                                        <div class="form-group ">
                        <div class="col-xs-12">
                            <input class="form-control" type="text" required="" placeholder="Zip"> </div>
                    </div>



                </form>

            </div>
          </div>
        </div>

2 个答案:

答案 0 :(得分:3)

 public DataPoint[] getDataPoint(){
    DataPoint[] dp = new DataPoint[]{
            new DataPoint(temp1, 1),
            new DataPoint(2, 5),
            new DataPoint(3, 1),
            new DataPoint(5, 6),
            new DataPoint(8, 3),
    };
   // graph.addSeries(series);
    return(dp);


}

答案 1 :(得分:1)

首先是秋天,没有col-lg-20这样的东西。 Bootstrap的网格系统最多为12列。

您只需将此规则添加到CSS:

.login-register{
    overflow: scroll; /* Alowing the card to scroll */
    padding: 5% 0; /*For shifting your card at the top of the page */
}