如何执行通过Bootstrap列在表单上显示图像

时间:2019-04-09 09:30:00

标签: twitter-bootstrap bootstrap-4

我有这个设计,我想使用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>

enter image description here

0 个答案:

没有答案