搜索
搜索

如何在CSS中进行宽度绑定

debugcn 发表于 Dev
7
亚历克斯·朱可夫斯基（Alex Zhukovskiy）

我在不同的div中有多个元素，应该在某行对齐。我可以对其宽度进行硬编码（例如40％），但这看起来很丑。我还可以在页面加载时使用JS指定以像素为单位的精确值（但无法很好地调整大小）。

我该如何避免这种曲折？在此处输入图片说明

这是理想的结果（但是我必须进行硬编码width: 30%才能使其工作）：在此处输入图片说明

标记：

<div class="panel-body">
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_patchSize</span>
        <input id="sourceObserver_patchSize" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.PatchSize" initial-value="@Model.Custom.PatchSize" value="@Model.Custom.PatchSize.RenderIfNotEqual(Model.Default.PatchSize)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_scanInterval</span>
        <input id="sourceObserver_scanInterval" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.ScanInterval" initial-value="@Model.Custom.ScanInterval" value="@Model.Custom.ScanInterval.RenderIfNotEqual(Model.Default.ScanInterval)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_maxWaitingTime</span>
        <input id="sourceObserver_maxWaitingTime" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MaxWaitingTime" initial-value="@Model.Custom.MaxWaitingTime" value="@Model.Custom.MaxWaitingTime.RenderIfNotEqual(Model.Default.MaxWaitingTime)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_shutdownTimeout</span>
        <input id="sourceObserver_shutdownTimeout" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.ShutdownTimeout" initial-value="@Model.Custom.ShutdownTimeout" value="@Model.Custom.ShutdownTimeout.RenderIfNotEqual(Model.Default.ShutdownTimeout)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_maximumBytes</span>
        <input id="sourceObserver_maximumBytes" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MemoryLimit.MaximumBytes" initial-value="@Model.Custom.MemoryLimit.MaximumBytes" value="@Model.Custom.MemoryLimit.MaximumBytes.RenderIfNotEqual(Model.Default.MemoryLimit.MaximumBytes)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitMs</span>
        <input id="sourceObserver_freeMemoryWaitMs" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MemoryLimit.FreeMemoryWaitMs" initial-value="@Model.Custom.MemoryLimit.FreeMemoryWaitMs" value="@Model.Custom.MemoryLimit.FreeMemoryWaitMs.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitMs)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitCount</span>
        <input id="sourceObserver_freeMemoryWaitCount" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MemoryLimit.FreeMemoryWaitCount" initial-value="@Model.Custom.MemoryLimit.FreeMemoryWaitCount" value="@Model.Custom.MemoryLimit.FreeMemoryWaitCount.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitCount)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
</div>
迈达斯

就像添加以下CSS规则一样简单：

.input-group {
    display: table-row;
}

例子：

.panel-body {
    border-spacing: 0 1em;
}
.panel-body:before,
.panel-body:after {
    display: none !important;
}
.input-group {
    display: table-row !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="panel-body">
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_patchSize</span>
        <input id="sourceObserver_patchSize" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.PatchSize" initial-value="@Model.Custom.PatchSize" value="@Model.Custom.PatchSize.RenderIfNotEqual(Model.Default.PatchSize)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_scanInterval</span>
        <input id="sourceObserver_scanInterval" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.ScanInterval" initial-value="@Model.Custom.ScanInterval" value="@Model.Custom.ScanInterval.RenderIfNotEqual(Model.Default.ScanInterval)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_maxWaitingTime</span>
        <input id="sourceObserver_maxWaitingTime" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MaxWaitingTime" initial-value="@Model.Custom.MaxWaitingTime" value="@Model.Custom.MaxWaitingTime.RenderIfNotEqual(Model.Default.MaxWaitingTime)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_shutdownTimeout</span>
        <input id="sourceObserver_shutdownTimeout" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.ShutdownTimeout" initial-value="@Model.Custom.ShutdownTimeout" value="@Model.Custom.ShutdownTimeout.RenderIfNotEqual(Model.Default.ShutdownTimeout)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_maximumBytes</span>
        <input id="sourceObserver_maximumBytes" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MemoryLimit.MaximumBytes" initial-value="@Model.Custom.MemoryLimit.MaximumBytes" value="@Model.Custom.MemoryLimit.MaximumBytes.RenderIfNotEqual(Model.Default.MemoryLimit.MaximumBytes)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitMs</span>
        <input id="sourceObserver_freeMemoryWaitMs" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MemoryLimit.FreeMemoryWaitMs" initial-value="@Model.Custom.MemoryLimit.FreeMemoryWaitMs" value="@Model.Custom.MemoryLimit.FreeMemoryWaitMs.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitMs)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitCount</span>
        <input id="sourceObserver_freeMemoryWaitCount" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MemoryLimit.FreeMemoryWaitCount" initial-value="@Model.Custom.MemoryLimit.FreeMemoryWaitCount" value="@Model.Custom.MemoryLimit.FreeMemoryWaitCount.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitCount)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
</div>

出于某种原因，Bootstrap会添加伪元素:before和:afteron .panel-body，这会在border-spacing使用时导致额外的空间。简单地隐藏它们似乎可以解决问题。

同样!important，上面示例中的任何内容仅对于示例在此处起作用是必需的。如果您在Bootstrap之后添加样式表，则不需要它们。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在css中进行输入并选择相同的宽度

来自分类Dev

如何在css中进行图像裁剪

来自分类Dev

如何在css中进行图像裁剪

来自分类Dev

如何在WPF MVVM中进行数据绑定

来自分类Dev

如何在JavaFX 2中的FXML中进行绑定？

来自分类Dev

如何在Zend Framework中进行绑定和喜欢

来自分类Dev

如何在WPF MVVM中进行数据绑定

来自分类Dev

如何在 Angular 4 中进行数据属性绑定？

来自分类Dev

如何在css上具有不同的行宽

来自分类Dev

在指令中进行数据绑定后获取宽度

来自分类Dev

如何在CSS工作中进行过渡

来自分类Dev

如何在CSS / JavaScript中进行模式突出显示

来自分类Dev

如何在 WordPress 的 base.css 中进行更改

来自分类Dev

如何在Bootstrap3表单中进行小宽度输入

来自分类Dev

如何在webapi 2.2 odata中进行未绑定的POST操作

来自分类Dev

如何在Angular 2中进行简单的文本输入绑定？

来自分类Dev

如何在Emacs中进行缓冲区本地键绑定？

来自分类Dev

如何在vmware工作站的ubuntu 12.04中进行绑定？

来自分类Dev

如何在ReactiveCocoa 3和4中进行基本绑定

来自分类Dev

如何在Vue.js中进行父子孙之间的双向数据绑定

来自分类Dev

如何在Xamarin.Forms中进行可绑定的标记扩展

来自分类Dev

如何在vmware工作站的ubuntu 12.04中进行绑定？

来自分类Dev

如何在 WPF 中的 Validation.ErrorTemplate 中进行 DataTrigger 绑定

来自分类Dev

如何避免在VBA中进行引用（早期绑定与后期绑定）

来自分类Dev

如何在Xcode Interface Builder约束中进行设置，以使视图相应地更改其宽度或高度？

来自分类Dev

如何使JavaScript单元格占据全行宽度

来自分类Dev

如何计算标签的最后一行宽度？

来自分类Dev

如何在Linux中进行单向差异？

来自分类Dev

如何在MySQL中进行插值

Related 相关文章

  1. 1

    如何在css中进行输入并选择相同的宽度

  2. 2

    如何在css中进行图像裁剪

  3. 3

    如何在css中进行图像裁剪

  4. 4

    如何在WPF MVVM中进行数据绑定

  5. 5

    如何在JavaFX 2中的FXML中进行绑定？

  6. 6

    如何在Zend Framework中进行绑定和喜欢

  7. 7

    如何在WPF MVVM中进行数据绑定

  8. 8

    如何在 Angular 4 中进行数据属性绑定？

  9. 9

    如何在css上具有不同的行宽

  10. 10

    在指令中进行数据绑定后获取宽度

  11. 11

    如何在CSS工作中进行过渡

  12. 12

    如何在CSS / JavaScript中进行模式突出显示

  13. 13

    如何在 WordPress 的 base.css 中进行更改

  14. 14

    如何在Bootstrap3表单中进行小宽度输入

  15. 15

    如何在webapi 2.2 odata中进行未绑定的POST操作

  16. 16

    如何在Angular 2中进行简单的文本输入绑定？

  17. 17

    如何在Emacs中进行缓冲区本地键绑定？

  18. 18

    如何在vmware工作站的ubuntu 12.04中进行绑定？

  19. 19

    如何在ReactiveCocoa 3和4中进行基本绑定

  20. 20

    如何在Vue.js中进行父子孙之间的双向数据绑定

  21. 21

    如何在Xamarin.Forms中进行可绑定的标记扩展

  22. 22

    如何在vmware工作站的ubuntu 12.04中进行绑定？

  23. 23

    如何在 WPF 中的 Validation.ErrorTemplate 中进行 DataTrigger 绑定

  24. 24

    如何避免在VBA中进行引用（早期绑定与后期绑定）

  25. 25

    如何在Xcode Interface Builder约束中进行设置，以使视图相应地更改其宽度或高度？

  26. 26

    如何使JavaScript单元格占据全行宽度

  27. 27

    如何计算标签的最后一行宽度？

  28. 28

    如何在Linux中进行单向差异？

  29. 29

    如何在MySQL中进行插值

热门标签

归档