如何在弹出窗口内形成正确的尺寸？

Question

我试图在弹出窗口中插入一个表单（我使用Bootstrap，但即使使用手工制作的简单CSS网格也可以重现问题）。

.popover
  form.form-horizontal
    .form-group
      label.col-sm-2.control-label(for='inputEmail3') Email
      .col-sm-10
        input#inputEmail3.form-control(type='email', placeholder='Email')

http://codepen.io/FezVrasta/pen/GpoxZz

问题是表格在弹出窗口内时无法正确设置其大小，然后会产生一些不良影响。
例如，剪切标签，以及没有CSS定义宽度的任何其他元素。

标签被剪切

我无法使用CSS设置宽度，因为在我的应用中，标签是由后端生成的，我不知道它们的长度。
如果不通过CSS手动设置width，如何避免表单变薄？

  

澄清

     

我并没有试图解决这个愚蠢的问题，我试图这样做   明白为什么会发生这种情况，我想找到一个可靠的解决方案   问题。

     

请不要发布回复，要求我使用javascript，添加填充，   设置宽度等。谢谢！

Answer 1

我认为您可以尝试的一个非常快速的解决方案是添加word-break CSS属性。

CODEPEN

.popover {
  display: block;
  max-width: initial;
  margin: 20px;
}
.popover .form-horizontal .form-group {
  margin-left: 0;
  margin-right: 0;
}
.popover .form-horizontal .control-label {
  padding-right: 0;
  padding-left: 0;
}
.popover .col-sm-2 {
  word-break: keep-all;
}

在这种情况下，您不必修改宽度属性。请注意word-break does not work使用较旧的Opera浏览器。

仍然建议您更改标签和输入字段的大小，因为您的标签现在（由Bootstrap类设置）是总宽度的16％，而输入的宽度是83％。无论如何，我希望它可以帮助你。

<强> - 编辑 -

我知道您不想调整对象的宽度，但除了修改它之外我找不到任何其他解决方案。我创建了一个小的JS代码，用于检查标签中的字符数，并更改标签和输入字段的宽度。也许你可以试试这样的东西。

CODEPEN

var labelText = $(".test").text()
var lengthLabel = labelText.length;

if(lengthLabel > 6){
  $('.popover .form-horizontal .control-label').css('width','40%');
  $('.popover .col-sm-10').css('width','60%');
}

Answer 2

希望这会对你有所帮助。

CSS：

Traceback (most recent call last):
  File "/pathToFile/Python/project/main", line 58, in <module>
    start()
  File "/pathToFile/Python/project/main.py", line 55, in start
    options,listOfPools=mapArgs(args)
  File "/pathToFile/Python/project/main.py", line 39, in mapArgs
    options = Options(anyBarFailureColor,anyBarWarningColor,anyBarScrubInProgressColor,anyBarPortNumber)
TypeError: object() takes no parameters

玉：

.popover
 display block
 max-width initial

.form-horizontal
 margin-left 4px;
 margin-right 30px;

.control-label
 text-align left;
 margin-left 1px;

http://codepen.io/har_kaur17/pen/LpGmRK