Question

http://www.bootply.com/124116

我有两个嵌套列，但我似乎无法将其内容集中在其中。如果我摆脱“浮动：左”，那么它会分成两行我不想要的。我需要做些什么来集中这个？为了清楚起见，我想把cas_subboxA和cas_subboxB的内容集中在一起，我添加了边框。

HTML：

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
            <div class="panel-heading">
                Calculator
            </div>
            <div class="panel-body">
                <form id="cas_form">
                    <div class="row" id="cas_input_row">
                        <div class="col-md-6" id="cas_subboxA">
                            <input class="form-control" id="cas_datepicker" type="text" placeholder="mm/dd/yyyy">
                            <button class="btn btn-default" id="cas_datebutton" type="button">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </button>
                            <div id="cas_radios">
                                <input name="operation" type="radio" value="plus">plus<br>
                                <input name="operation" type="radio" value="minus">minus
                            </div>
                        </div>
                        <div class="col-md-6" id="cas_subboxB">
                            <input name="daystoaddorsubtract" class="form-control" id="cas_text2" type="number" placeholder="#">
                            <div id="cas_radios">
                                <input name="cal_or_work" type="radio" value="calendar">calendar days<br>
                                <input name="cal_or_work" type="radio" value="work">work days
                            </div>
                        </div>
                    </div>
                    <div>
                        <div id="cas_buttons">
                            <button class="btn btn-success" type="submit"><i class="glyphicon glyphicon-ok"></i> Calculate Dates!</button> 
                            <button class="btn btn-default" type="reset"><i class="glyphicon glyphicon-remove"></i> Reset</button>
                        </div>
                    </div>
                </form>
            </div>
            </div>
        </div>
    </div>
</div>

CSS：

#cas_form {
    margin-top: 20px;
    text-align: center;

}

#cas_input_row {
    text-align: center;
}

#cas_datepicker {
    width: 110px;
    float: left;
}

#cas_datebutton {
    float: left;
}

#cas_radios {
    float: left;
    margin-top: -4px;
    margin-left: 20px;
    height: 40px;
    vertical-align: baseline;
    text-align: left;
}

#cas_subboxA, #cas_subboxB {
    text-align: center;
    border: solid 1px;
}

#cas_text2 {
    margin-left: 20px;
    width: 70px;
    float: left;
    text-align: center;

}

#cas_buttons {
    margin-top: 20px;
    text-align: center;
}

Answer 1

您是在尝试将内容集中在输入字段或面板标题内还是两者中？尝试在.container之后添加div .text-center center，它将使面板标题居中。您可以使用.text-align：center在#cas_datepicker上居中显示字段内容，希望这会有所帮助。

How do you get centered content using Twitter bootstrap?

Bootstrap：无法在嵌套列中水平居中内容

1 个答案: