html - 如何在 CSS 中进行宽度绑定(bind)

Question

我在不同的 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>

Answer 1

就像添加以下 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和 :after在 .panel-body , 当 border-spacing 时会产生额外的空间用来。简单地隐藏它们似乎可以解决问题。

还有任何!important在上面的例子中，只有例子在这里工作是必要的。如果您在 Bootstrap 之后包含您的样式表，则不需要它们。