【问题标题】:2 images side by side - Bootstrap [duplicate]并排 2 张图像 - Bootstrap [重复]
【发布时间】:2016-12-28 01:39:40
【问题描述】:

这里是初学者,我正在构建一个单页引导站点,我已将站点划分为多个部分,我已经在第一部分添加了第一张图片作为背景。 我尝试过使用色谱柱,但没有使用小瓶。

我无法像原型 (http://imgur.com/a/MJQ2w) 中所示的那样并排获得这两个图像。

我希望页面布局像这样没有边距,但我无法使用引导程序来做到这一点。请用你的专业知识帮助我。

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

【问题讨论】:

标签: html css twitter-bootstrap


【解决方案1】:

在此处查看我的示例,不删除引导程序提供的任何填充

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

【讨论】:

    【解决方案2】:

    替换你的代码

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

    【讨论】:

      【解决方案3】:

      已解决问题,谢谢各位。

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

      【讨论】:

        猜你喜欢
        • 2023-03-22
        • 2022-01-01
        • 1970-01-01
        • 2012-03-04
        • 2021-12-01
        • 2018-11-06
        • 2015-08-05
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多