Question

初学者，我正在构建一个单页引导程序站点，我已将该站点划分为多个部分，我已在第一部分中添加了第一个图像作为背景。我尝试过使用柱子，但没有使用过样品瓶。

我不能像原型中那样（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>

Answer 1

替换您的代码

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

Answer 2

在此检查我的示例，不删除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

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

并排2张图片 - Bootstrap

3 个答案: