Question

在我的fiddle我展示了一个分为两个部分（水平）的表格。左边的部分是有问题的。有一个select元素与两个文本字段一致，共享可用宽度百分比。我想要的是给选择和中间文本字段一个定义的百分比宽度，并使用正确的文本字段来休息以始终跨越到正确的容器边界。在缩放容器时，此布局必须保持这样的行为。此外，select元素必须保持可读性。目前，其内容在缩放时会被部分隐藏。

我无法想出正确的格式来实现这个目标。

这是我的代码：

<style>
.unseen {
    display: none
}
form {
    background: maroon;
    margin: 0;
    display: flex;
}
[class*="span5"] {
    background: olive
}
[class*="span7"] {
    background: pink
}
#salutation {
    width: 12%;
    min-width: 50px
}
#firstname {
    width: 30%
}
#lastname {
    width: 40%
}
</style>

<div class="container" id="page">
   <div class="row-fluid" id="page_content">
      <section class="form row-fluid" id="page_content">
         <div class="row-fluid">
            <form class="form-horizontal form-validate">
               <div class="span7">
                  <fieldset class="well-small">
                     <legend></legend>
                     <div class="control-group">
                        <div class="control-label">
                           <label id="salutation-lbl" for="salutation">Full Name</label>
                           <label id="firstname-lbl" for="firstname" class="unseen">First Name</label>
                           <label id="lastname-lbl" for="lastname" class="unseen">Last Name</label>
                        </div>
                        <div class="controls">
                           <select id="salutation" name="salutation" class="fullname salutation">
                              <option value="Mr." selected>Mr.</option>
                              <option value="Mrs.">Mrs.</option>
                              <option value="Ms.">Ms.</option>
                           </select>
                           <input type="text" name="firstname" id="firstname" value="Max" placeholder="forename" />
                           <input type="text" name="lastname" id="lastname" value="Mustermann" placeholder="surname" />
                        </div>
                     </div>
                  </fieldset>
               </div>
               <div class="span5">
                   <h2>Other content</h2>
               </div>
            </form>
         </div>
      </section>
   </div>
</div>

Answer 1

我试图以最好的方式解决你的问题但不完全按照你想要的问题的第一部分，因为百分比宽度不会总是正常工作，因为bootstrap不断改变父容器＆＃39;宽度。所以，我编写了一个jquery函数，它将计算这些输入文本框的所需宽度，并动态地将它们添加为各自的css宽度。此功能以及其他一些小的html / css调整将解决您的问题。

HTML - 将引导表单类从form-horizontal更改为form-inline，更符合要求。

<form class="form-inline form-validate">
CSS
- 添加了65px的固定宽度，即使使用最长的选项，也可以保持select元素的可读性。（MRS）。
- 从#firstname和#lastname选择器移除了百分比宽度，因为我们将通过jquery添加这些宽度。
- 最后将!important添加到display类的unseen属性中（切换到bootstrap form-inline类时需要）
```
.unseen {
    display: none !important;
}

form {
    background: maroon;
    margin: 0;
    display: flex;
}

[class*="span5"] {
    background: olive;
}

[class*="span7"] {
    background: pink;
}

#salutation {
    width: 65px;
}
```

JQUERY - 这是执行所有技巧的jquery函数。此函数计算文本框的可用宽度以适应默认填充

function resizeFormElements() {
    /*
        Calculating the available width for the two text boxes by subtracting the 
        => main control container width 
         - the width of the selector element
         - 4 * default_bootstrap_margin_of_3px between input elements (two input elements so both left and right margins)
         - 4 * default_padding_of_6px of input text elements as per bootstrap.min.css line 238 (two input elements so both left and right padding)
         - 1 (to not get affected by truncated values)
    */
    var avail = parseFloat($(".controls").width()) - parseInt($("#salutation").css("width")) - 4 * 3 - 4 * 6 - 1;
    $("#firstname").css("width", avail / 2);
    $("#lastname").css("width", avail / 2);
}

$(window).on("resize load", function () {
    resizeFormElements();
});

以上解决方案的工作fiddle。

如何在缩放父容器时使选择和文本字段显示为内联和缩放？

1 个答案: