布尔玛两种形式之间的巨大差距
huge gap between two forms in bulma
我有一个 Bulma CSS 表格，我想消除两个表格之间的差距。
有没有一种方法可以在不添加自定义 css.
的情况下修改此 Bulma 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>
当您 post 此代码在 https://codepen.io/JMSmith/pen/yZKxOp
你会注意到 Form2 和 Form3 之间存在巨大差距。
我的问题是如何消除这个差距？
我是 Bulma 的新手，也是 css 的新手。
你可以删除第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>
看看我的笔。 2 更改：主要问题是将第二个和第三个表单全部包装在一列中，因此左侧是它自己的列，然后右侧包含其他两个表单。
然后你需要删除 form3 上面 col-is-10 中的 offset-2 class，因为整个右栏只有 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>
我有一个 Bulma CSS 表格，我想消除两个表格之间的差距。 有没有一种方法可以在不添加自定义 css.
的情况下修改此 Bulma 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>
当您 post 此代码在 https://codepen.io/JMSmith/pen/yZKxOp
你会注意到 Form2 和 Form3 之间存在巨大差距。
我的问题是如何消除这个差距？
我是 Bulma 的新手，也是 css 的新手。
你可以删除第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>
然后你需要删除 form3 上面 col-is-10 中的 offset-2 class，因为整个右栏只有 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>