当前位置: 动力学知识库 > 问答 > 编程问答 >

html - 2 images side by side - Bootstrap

问题描述:

This question is an exact duplicate of:

  • Bootstrap 3 - Aligning column height

    1 answer

网友答案:

Check my example here, Without removes any padding provide by bootstrap

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

网友答案:

Replace your code

  <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>

With following line of code

  <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>
网友答案:

Fixed the issue, Thanks guys.

    <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;
分享给朋友:
您可能感兴趣的文章:
随机阅读: