我有一个背景 div
用来创建“框”效果。我需要此 div
来适合其内容,但我搜索并尝试执行的操作没有按预期工作。 我正在使用 Bootstrap 。
我已经在我的 div CSS 中尝试过:
display:inline-block;
display:inline-block !important;
这是我的页面 没有 上面的 css:
这是我的页面带有 above css
这就是我需要的。红线中我的背景“框”限制:
页面 html:
<div class="input-content-boxed">
<div class="row">
<div class="col-md-4">
<div class="form-group form-group-default required">
<label>Nome</label>
<input asp-for="Name" class="form-control" />
</div>
</div>
<div class="col-md-2">
<div class="form-group form-group-default required">
<label>CNPJ</label>
<input id="txtCNPJ" asp-for="CNPJ" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group form-group-default">
<label>País</label>
<select asp-for="Country" asp-items="new SelectList(ViewBag.Countries)" id="listCountry" data-init-plugin="select2" style="width: 100%">
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group form-group-default" id="divStateBrazil">
<label>Estado</label>
<select id="listStateBrazil" asp-items="new SelectList(ViewBag.BrazilStates)" data-init-plugin="select2" style="width: 100%">
</select>
</div>
<div class="form-group form-group-default" id="divStateEUA" hidden>
<label>Estado</label>
<select id="listStateEUA" asp-items="new SelectList(ViewBag.EUAStates)" data-init-plugin="select2" style="width: 100%">
</select>
</div>
<div class="form-group form-group-default" id="divStatePeru" hidden>
<label>Estado</label>
<select id="listStatePeru" asp-items="new SelectList(ViewBag.PeruStates)" data-init-plugin="select2" style="width: 100%">
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-default">
<label>Cidade</label>
<input asp-for="City" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-default">
<label>Logradouro</label>
<input asp-for="Street" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group form-group-default">
<label>Bairro</label>
<input asp-for="District" class="form-control" />
</div>
</div>
<div class="col-md-3">
<div class="form-group form-group-default required">
<label>CEP</label>
<input id="txtCEP" asp-for="CEP" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group form-group-default">
<label>Número</label>
<input asp-for="Number" class="form-control" />
</div>
</div>
<div class="col-md-3">
<div class="form-group form-group-default">
<label>Observação</label>
<input asp-for="Observation" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-default required">
<label>Email</label>
<input asp-for="Email" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group form-group-default required">
<label>Telefone</label>
<input id="txtPhone" asp-for="Phone" class="form-control" />
</div>
</div>
<div class="col-md-3">
<div class="form-group form-group-default">
<label>Celular</label>
<input id="txtCellphone" asp-for="Cellphone" class="form-control" />
</div>
</div>
</div>
</div>
CSS:
.input-content-boxed {
background-color: #ffffff;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-top:15px;
border-radius: 3px;
box-shadow: 2px 2px 3px #888888;
display:inline-block;
}
最佳答案
我看到的主要问题是您正在使用 Bootstrap col-
类,因此您的内容被迫适应网格。具体来说,布局的大多数行似乎只使用了网格 12 列中的 6 列,这导致表单仅占用可用宽度的一半。
您需要确保每行的 col-
类总和为 12。
出于本演示的目的,我使用了 col-xs-
类,因此布局适合下面的窄演示框架。您可能希望使用响应式类来使表单在更多视口(viewport)尺寸下都能很好地工作。
.input-content-boxed {
background-color: #ffffff;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-top:15px;
border-radius: 3px;
box-shadow: 2px 2px 3px #888888;
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-content-boxed">
<div class="row">
<div class="col-xs-8">
<div class="form-group form-group-default required">
<label>Nome</label>
<input asp-for="Name" class="form-control" />
</div>
</div>
<div class="col-xs-4">
<div class="form-group form-group-default required">
<label>CNPJ</label>
<input id="txtCNPJ" asp-for="CNPJ" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group form-group-default">
<label>País</label>
<select asp-for="Country" asp-items="new SelectList(ViewBag.Countries)" id="listCountry" data-init-plugin="select2" style="width: 100%">
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group form-group-default" id="divStateBrazil">
<label>Estado</label>
<select id="listStateBrazil" asp-items="new SelectList(ViewBag.BrazilStates)" data-init-plugin="select2" style="width: 100%">
</select>
</div>
<div class="form-group form-group-default" id="divStateEUA" hidden>
<label>Estado</label>
<select id="listStateEUA" asp-items="new SelectList(ViewBag.EUAStates)" data-init-plugin="select2" style="width: 100%">
</select>
</div>
<div class="form-group form-group-default" id="divStatePeru" hidden>
<label>Estado</label>
<select id="listStatePeru" asp-items="new SelectList(ViewBag.PeruStates)" data-init-plugin="select2" style="width: 100%">
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group form-group-default">
<label>Cidade</label>
<input asp-for="City" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group form-group-default">
<label>Logradouro</label>
<input asp-for="Street" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group form-group-default">
<label>Bairro</label>
<input asp-for="District" class="form-control" />
</div>
</div>
<div class="col-xs-6">
<div class="form-group form-group-default required">
<label>CEP</label>
<input id="txtCEP" asp-for="CEP" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group form-group-default">
<label>Número</label>
<input asp-for="Number" class="form-control" />
</div>
</div>
<div class="col-xs-6">
<div class="form-group form-group-default">
<label>Observação</label>
<input asp-for="Observation" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group form-group-default required">
<label>Email</label>
<input asp-for="Email" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group form-group-default required">
<label>Telefone</label>
<input id="txtPhone" asp-for="Phone" class="form-control" />
</div>
</div>
<div class="col-xs-6">
<div class="form-group form-group-default">
<label>Celular</label>
<input id="txtCellphone" asp-for="Cellphone" class="form-control" />
</div>
</div>
</div>
</div>
关于html - 使 div 适合内部内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47944267/