我有这个设计,我想使用Bootstrap来执行它,如果我以col-4
的形式进行操作,则必须制作图像col-8
,这将使它变得比应有的样式更小。这是我的代码
<div class='main-section'>
<div class="row header-section mt-5 mb-5">
<u>The Ne</u>w Era of Transportation
</div>
<div class="row content-section">
<!-- image -->
<div class="col-9">
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Separated they right at the coast of the Semantics.
<img class="img-fluid" src="../../assets/img/home.png"/>
</div>
<!-- end of image -->
<!-- form section -->
<div class="col-3">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
<!-- form section -->
</div>
</div>