引导柱宽度调节

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无法完美适应下拉菜单，因此您必须为不同的断点考虑不同的布局。 引导程序具有许多不错的CSS类，您可以立即使用它们来实现此目的。

超小型设备

对于额外的小型设备，您仍然可以将年，月和日下拉列表放到一行中。

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因为它使列之间的.row 更紧密 。 .form-group用于为每个输入组提供一个漂亮的margin-bottom 。 使用.col是为了给您自动宽度 。

看起来如何

现在，您可以使用适用于超小型设备的布局。 您可以从此布局开始为具有不同屏幕尺寸的每个不同设备构建，并添加必要的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>

看起来如何