Question

我是不熟悉Bootstrap的人。我尝试调整3列行以适合，最后一列又分为3列，但是它重叠且难以正确显示。

第一行的我的cshtml：

 <div class="row">
        <div class="col-md-4 col-sm-4">
            <strong>Last Name</strong> <span class="required">*</span>
            @Html.TextBoxFor(m => m.Patient_Lastname, new { @class = "text-primary", required = "required" })
        </div>
        <div class="col-md-4 col-sm-4">
            <strong>First Name</strong> <span class="required">*</span>
            @Html.TextBoxFor(m => m.Patient_Firstname, new { @class = "text-primary", required = "required" })
        </div>
       <div class="col-md-1 col-sm-1">
            <strong>birth</strong> <span class="required">*</span>
            @Html.DropDownListFor(m => m.YearOfBirth, Enumerable.Range(1900, 119).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }),
           "--Year--", new { @class = "form-control", style = "width: 90px; height:30px;", required = "required" })
        </div> 
        <div class="col-md-1 col-sm-1">
            <strong>Month</strong> <span class="required">*</span>
            @Html.DropDownListFor(m => m.YearOfBirth, Enumerable.Range(1, 12).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }),
           "--Month--", new { @class = "form-control", style = "width: 90px; height:30px;", required = "required" })
        </div> 
        <div class="col-md-2 col-sm-2">
            <strong>Day</strong> <span class="required">*</span>
            @Html.DropDownListFor(m => m.YearOfBirth, Enumerable.Range(1, 31).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }),
           "--Day--", new { @class = "form-control", style = "width: 80px; height:30px;", required = "required" })
        </div> 
    </div>

第二行和第三行直接通过col-md-4

您能帮我解决这个问题吗？

TIA 罗恩。

Answer 1

我认为问题在于输入的填充宽度大于可用的尝试调整其大小的宽度。

Answer 2

您不必遵循固定的布局，以便屏幕自动显示漂亮！尝试并尝试最适合您需要的东西是您的工作。

很显然，col-sm-1无法完美适应下拉菜单，因此您必须为不同的断点考虑不同的布局。而且 bootstrap 具有许多nice CSS classes，您可以直接使用它来实现此目的。

其他小型设备

对于超小型设备，您仍然可以将年，月和日的下拉菜单置于一行中。

HTML结构

<form>
    <div class="form-row">
        <div class="form-group">Last Name Label & Input</div>
        <div class="form-group">First Name Label & Input</div>
        <div class="form-group">
            <div class="form-row">
                <div class="form-group col">Year Label & Input</div>
                <div class="form-group col">Month Label & Input</div>
                <div class="form-group col">Day Label & Input</div>
            </div>
        </div>
    </div>
</form>

我在这里使用.form-row而不是.row，因为它在列之间为您提供了tighter gutters。 .form-group用于为每个输入组提供一个不错的margin-bottom。使用.col是为了给您auto width。

外观如何

现在，您可以使用适用于超小型设备的布局。您可以从此布局开始为具有不同屏幕尺寸和添加必要CSS类的每个不同设备开始构建。

小型设备

对于小型设备，您可能希望将姓氏和名字输入作为连续两列输入。

HTML结构

<form>
    <div class="form-row">
        <div class="form-group col-sm-6">Last Name Label & Input</div>
        <div class="form-group col-sm-6">First Name Label & Input</div>
        <div class="form-group col-sm-12">
            <div class="form-row">
                <div class="form-group col">Year Label & Input</div>
                <div class="form-group col">Month Label & Input</div>
                <div class="form-group col">Day Label & Input</div>
            </div>
        </div>
    </div>
</form>

看到那些.col-sm-*类被添加了吗？

外观如何

...

超大型设备

HTML结构

<form>
    <div class="form-row">
        <div class="form-group col-sm-6 col-xl-4">Last Name Label & Input</div>
        <div class="form-group col-sm-6 col-xl-4">First Name Label & Input</div>
        <div class="form-group col-sm-12 col-xl-4">
            <div class="form-row">
                <div class="form-group col">Year Label & Input</div>
                <div class="form-group col">Month Label & Input</div>
                <div class="form-group col">Day Label & Input</div>
            </div>
        </div>
    </div>
</form>

引导柱宽度调节

2 个答案:

其他小型设备

HTML结构

外观如何

小型设备

HTML结构

外观如何

超大型设备

HTML结构

外观如何