我有一个布尔玛CSS表单,我想消除两种表单之间的空白。 有没有办法可以在不添加自定义css的情况下修改此布尔玛css。
<section class="section">
<div class="container">
<form class="control">
<div class="columns is-multiline">
<div class="column is-2">
<div class="box">
<h1 class="subtitle">Form Part 1</h1>
<div class="field">
<label class="label">col1</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col1">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<div class="field">
<label class="label">col2</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col2 ">
<i class="fas fa-percentage"></i>
</div>
</div>
<div class="field">
<label class="label">col3</label>
<div class="control">
<div class="select is-fullwidth">
<select>
<option>drop1</option>
<option>drop2</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">col3</label>
<div class="control">
<div class="select is-fullwidth">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
</div>
<div class="column is-10">
<div class="box">
<h1 class="subtitle">form2</h1>
<div class="columns ">
<div class="column is-2">
<div class="field">
<label class="label">col1</label>
<div class="control">
<input class="input" type="text" placeholder="col1">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col2</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col2">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col3</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col3">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col4</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col4">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col5</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col5">
</div>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
</div>
<div class="column is-10 is-offset-2">
<div class="box">
<h1 class="subtitle">form3</h1>
<div class="columns">
<div class="column is-3">
<div class="field">
<label class="label">col1</label>
<div class="control">
<input class="input" type="text" placeholder="col1">
</div>
</div>
</div>
<div class="column is-1">
<div class="field">
<label class="label">col2 </label>
<div class="control">
<input class="input" type="text" placeholder="col2">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col3 </label>
<div class="control">
<input class="input" type="text" placeholder="col3">
</div>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
</div>
</div>
</form>
</div>
</section>
在https://codepen.io/JMSmith/pen/yZKxOp上发布此代码
您会发现Form2和Form3之间存在巨大差距。
我的问题是如何消除这种差距?
我是布尔玛的新手,还是CSS的新手。
答案 0 :(得分:0)
您可以删除第96行 然后在第97行中删除is-offset-2,这将是我帮助修改的以下代码。
希望它对您有帮助。
<section class="section">
<div class="container">
<form class="control">
<div class="columns is-multiline">
<div class="column is-2">
<div class="box">
<h1 class="subtitle">Form Part 1</h1>
<div class="field">
<label class="label">col1</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col1">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<div class="field">
<label class="label">col2</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col2 ">
<i class="fas fa-percentage"></i>
</div>
</div>
<div class="field">
<label class="label">col3</label>
<div class="control">
<div class="select is-fullwidth">
<select>
<option>drop1</option>
<option>drop2</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">col3</label>
<div class="control">
<div class="select is-fullwidth">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
</div>
<div class="column is-10">
<div class="box">
<h1 class="subtitle">form2</h1>
<div class="columns ">
<div class="column is-2">
<div class="field">
<label class="label">col1</label>
<div class="control">
<input class="input" type="text" placeholder="col1">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col2</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col2">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col3</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col3">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col4</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col4">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col5</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col5">
</div>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
<div class="column is-10 is-offset-2">
<div class="box">
<h1 class="subtitle">form3</h1>
<div class="columns">
<div class="column is-3">
<div class="field">
<label class="label">col1</label>
<div class="control">
<input class="input" type="text" placeholder="col1">
</div>
</div>
</div>
<div class="column is-1">
<div class="field">
<label class="label">col2 </label>
<div class="control">
<input class="input" type="text" placeholder="col2">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col3 </label>
<div class="control">
<input class="input" type="text" placeholder="col3">
</div>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
</div>
</div>
</form>
</div>
</section>
答案 1 :(得分:0)
看看我的笔。 2更改:主要问题是将第二和第三种形式都包装在一个列中,因此左侧是其自己的列,然后右侧包含其他两种形式。
然后,您需要从form3上方的offset-2
中删除col-is-10
类,因为整个右列只有10个宽。
https://codepen.io/DanOswalt/pen/qgoMNv?editors=1000
<section class="section">
<div class="container">
<form class="control">
<div class="columns is-multiline">
<div class="column is-2">
<div class="box">
<h1 class="subtitle">Form Part 1</h1>
<div class="field">
<label class="label">col1</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col1">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<div class="field">
<label class="label">col2</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col2 ">
<i class="fas fa-percentage"></i>
</div>
</div>
<div class="field">
<label class="label">col3</label>
<div class="control">
<div class="select is-fullwidth">
<select>
<option>drop1</option>
<option>drop2</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">col3</label>
<div class="control">
<div class="select is-fullwidth">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
</div>
<div class="column is-10">
<div class="box">
<h1 class="subtitle">form2</h1>
<div class="columns ">
<div class="column is-2">
<div class="field">
<label class="label">col1</label>
<div class="control">
<input class="input" type="text" placeholder="col1">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col2</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col2">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col3</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col3">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col4</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col4">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col5</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col5">
</div>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
<div class="column is-10">
<div class="box">
<h1 class="subtitle">form3</h1>
<div class="columns">
<div class="column is-3">
<div class="field">
<label class="label">col1</label>
<div class="control">
<input class="input" type="text" placeholder="col1">
</div>
</div>
</div>
<div class="column is-1">
<div class="field">
<label class="label">col2 </label>
<div class="control">
<input class="input" type="text" placeholder="col2">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col3 </label>
<div class="control">
<input class="input" type="text" placeholder="col3">
</div>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
</div>
</div>
</form>
</div>
</div>
</section>