2個圖像並排 - Bootstrap

初學者在這裏，我正在構建一個頁面引導程序站點，我已將該網站分成多個部分，我已經在第一部分中添加了第一個圖像作爲背景。我曾嘗試使用列但沒有小瓶。2個圖像並排 - Bootstrap

我不能像原型（http://imgur.com/a/MJQ2w）中所示那樣並排獲取兩幅圖像。

我想頁面佈局是這樣的沒有利潤率，但我無法做到這一點與bootstrap。請幫助我的專業知識。

<header style="background-image: url('static/assets/home-bg.jpg');"> 
     <div class="intro-content"> 
      <div class="brand-name">Learning & Experience</div> 
      <hr class="colored"> 
      <div class="brand-name-subtext">Lorem Ipsum Dolor Init 
      </div> 
     </div> 
     <div class="scroll-down"> 
      <a class="btn page-scroll" href="#about"><i class="fa fa-angle-down fa-fw"></i></a> 
     </div> 
    </header> 

    <section id="about"> 
    <div class="container-fluid"> 
    <div class="row row-no-gutter"> 
     <div class="col-md-6 img-responsive"> 
     <img src="static/assets/training.png"> 
     </div> 
     <div class="col-md-6 img-responsive"> 
     <img src="static/assets/recruit.png" > 
     </div> 
    </div> 
    </div> 

    <div>

來源

2016-12-27 Zed

請加[MCVE]到您的文章！感謝:-) – TylerH

發佈您的代碼示例可以很容易地回答您的問題，這很好。 –

加@YonasHailu – Zed

固定的問題，謝謝你們。

<section id="about"> 
    <div class="container-fluid"> 
      <div class="row" id="port2-second-row"> 
       <div class="col-xs-6 imgcont" id="port2-first-col"> 
        <img src="static/assets/training.png" alt="training" /> 
       </div> <!-- end col-sm-6 --> 
       <div class="col-xs-6 imgcont" id="port2-second-col"> 
        <img src="static/assets/recruit.png" alt="recruit" /> 
       </div> <!-- end col-sm-6 --> 

      </div> <!-- end port-second-row -->

CSS：

img { 
    width: 100%; 
    height: 100%;} 

.imgcont { 
    padding: 0px;

來源

2016-12-27 17:39:40 Zed

替換代碼

<div class="col-md-6 img-responsive"> 
    <img src="static/assets/training.png"> 
    </div> 
    <div class="col-md-6 img-responsive"> 
    <img src="static/assets/recruit.png" > 
    </div>

隨着下面的代碼行

<div class="col-md-6"> 
    <img src="static/assets/training.png" class=" img-responsive" /> 
    </div> 
    <div class="col-md-6"> 
    <img src="static/assets/recruit.png" class=" img-responsive" /> 
    </div>

來源

2016-12-27 16:29:32 reza

檢查我的例子在這裏，沒有刪除任何填充通過引導提供

HTML

<section class="values"> 
       <div class="col-md-4 box text-white box blues"> 
        <div class="box-home"> 
         <h4>our values</h4> 
         <p>At MOCAZ PRIME, with the expertise of experienced traders, we join in giving the best advice and knowledge to individuals to ensure their financial goals can be achieved in any market conditions.</p> 
         <div class="icon-text"> 
          <p>01.</p> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-4 text-white box bg-city blacks"> 
        <div class="box-home"> 
         <h4>our philipsophy</h4> 
         <p>It is our ambition to keep up challenges of a dynamic and changing market. Consequently it is necessary to flexibly bring new techniques which meet the needs of our customers. This all predetermines us to achieve a leading position in the global financial advisory services.</p> 
         <div class="icon-text"> 
          <p>02.</p> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-4 text-white box blacks"> 
        <div class="box-home"> 
         <h4>our mission</h4> 
         <p>Our mission is to facilitate a world-class foreign exchange, metal and contracts for difference trading environment. We're dedicated to providing industry-leading technology to the international trading community and we strive to deliver educational tools and resources that enable traders to further develop their trading skills.</p> 
         <div class="icon-text"> 
          <p>03.</p> 
         </div> 
        </div> 
       </div> 
     </section>

DEMO

來源

2016-12-27 16:31:41 Fiido93

2個圖像並排 - Bootstrap

回答

相關問題