Question

当我调整窗口大小以查看小设备上的效果时，我的按钮（实际上是div）会松开它们的内联SVG背景。

我该如何解决这个问题？

这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  </head>

<body>

<section class="mt16 mb16">
        <div class="container">
          <div class="row">
            <div class="col-md-4 row">
              <div class="btn btn-primary col-md-6 col-md-offset-1">
                <a href="#">
                  <svg viewBox="0 75 350 200">
                    <path d="M268.34,146.93c18.16-20.88,21.81-49.38,11.93-73.34l-36.46,42.52l-35.94-06.99L195.96,74.5l36.37-42.42c-25.02-06.3-52.58,01.3-70.66,22.1c-19.07,21.93-22.19,52.29-10.39,76.93L56.24,240.4c-10.11,11.62-08.88,29.24,02.74,39.35c11.62,10.1,29.24,08.88,39.35-02.74l94.93-109.18C219.39,176.25,249.18,168.96,268.34,146.93z" fill="rgba(0,0,0,0.5)" stroke="none" transform="scale(0.75) translate(70,80)"></path>
                  </svg>
                </a>
              </div>
              <div class="col-md-12">
                <h4 class="">
                  <a href="#">Title 1</a>
                </h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
            </div>
            <div class="col-md-4 row">
              <div class="btn btn-primary col-md-6 col-md-offset-1">
                <a href="#">
                  <svg viewBox="0 75 350 200">
                    <path d="M253.1,28.72l-33.84-21.27c-08.54-05.36-19.79-02.78-25.17,05.76l-13.34,21.23l64.74,40.66l13.35-21.22C264.2,45.33,261.64,34.07,253.1,28.72zM65.55,217.86l64.74,40.66L235.81,90.54l-64.77-40.67L65.55,217.86zM55.66,269.52l-01.43,38.19l33.79-17.87l31.4-16.58l-62.46-39.25L55.66,269.52z" fill="rgba(0,0,0,0.5)" stroke="none" transform="scale(0.65) translate(120,120)"></path>
                  </svg>
                </a>
              </div>
              <div class="col-md-12">
                <h4 class="">
                  <a href="#">Title 2</a>
                </h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
            </div>
            <div class="col-md-4 row">
              <div class="btn btn-primary col-md-6 col-md-offset-1">
                <a href="#">
                  <svg viewBox="0 250 1000 571.43">
                    <path d="M400 675 v-250 q0 -25 -25 -25 h-100 q-25 0 -9 -19.21 l217.99 -261.59 q16 -19.21 32.01 0 l217.99 261.59 q16 19.21 -9 19.21 h-100 q-25 0 -25 25 v250 q0 25 -25 25 h-150 q-25 0 -25 -25 zM100 725 q0 -25 25 -25 h50 q25 0 25 25 v50 q0 25 25 25 h550 q25 0 25 -25 v-50 q0 -25 25 -25 h50 q25 0 25 25 v150 q0 25 -25 25 h-750 q-25 0 -25 -25 v-50 z" fill="rgba(0,0,0,0.5)" stroke="none" transform="scale(0.70) translate(200,275)"></path>
                  </svg>
                </a>
              </div>
              <div class="col-md-12">
                <h4 class="">
                  <a href="#">Title 3</a>
                </h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

</body>

</html>

我使用Odoo 8中包含的bootstrap，但是这个代码被编译为在新窗口浏览器中工作（问题也出现了，所以我希望修复这段代码会给我足够的信息来修复我在Odoo模板中的代码）。

Answer 1

您只需指定DIV或SVG的大小。

＆＃13;

DIV.btn {
  padding: 0;
}

DIV.btn svg {
  width: 40px;
  height: 40px;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

<section class="mt16 mb16">
        <div class="container">
          <div class="row">
            <div class="col-md-4 row">
              <div class="btn btn-primary col-md-6 col-md-offset-1">
                <a href="#">
                  <svg viewBox="0 75 350 200">
                    <path d="M268.34,146.93c18.16-20.88,21.81-49.38,11.93-73.34l-36.46,42.52l-35.94-06.99L195.96,74.5l36.37-42.42c-25.02-06.3-52.58,01.3-70.66,22.1c-19.07,21.93-22.19,52.29-10.39,76.93L56.24,240.4c-10.11,11.62-08.88,29.24,02.74,39.35c11.62,10.1,29.24,08.88,39.35-02.74l94.93-109.18C219.39,176.25,249.18,168.96,268.34,146.93z" fill="rgba(0,0,0,0.5)" stroke="none" transform="scale(0.75) translate(70,80)"></path>
                  </svg>
                </a>
              </div>
              <div class="col-md-12">
                <h4 class="">
                  <a href="#">Title 1</a>
                </h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
            </div>
            <div class="col-md-4 row">
              <div class="btn btn-primary col-md-6 col-md-offset-1">
                <a href="#">
                  <svg viewBox="0 75 350 200">
                    <path d="M253.1,28.72l-33.84-21.27c-08.54-05.36-19.79-02.78-25.17,05.76l-13.34,21.23l64.74,40.66l13.35-21.22C264.2,45.33,261.64,34.07,253.1,28.72zM65.55,217.86l64.74,40.66L235.81,90.54l-64.77-40.67L65.55,217.86zM55.66,269.52l-01.43,38.19l33.79-17.87l31.4-16.58l-62.46-39.25L55.66,269.52z" fill="rgba(0,0,0,0.5)" stroke="none" transform="scale(0.65) translate(120,120)"></path>
                  </svg>
                </a>
              </div>
              <div class="col-md-12">
                <h4 class="">
                  <a href="#">Title 2</a>
                </h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
            </div>
            <div class="col-md-4 row">
              <div class="btn btn-primary col-md-6 col-md-offset-1">
                <a href="#">
                  <svg viewBox="0 250 1000 571.43">
                    <path d="M400 675 v-250 q0 -25 -25 -25 h-100 q-25 0 -9 -19.21 l217.99 -261.59 q16 -19.21 32.01 0 l217.99 261.59 q16 19.21 -9 19.21 h-100 q-25 0 -25 25 v250 q0 25 -25 25 h-150 q-25 0 -25 -25 zM100 725 q0 -25 25 -25 h50 q25 0 25 25 v50 q0 25 25 25 h550 q25 0 25 -25 v-50 q0 -25 25 -25 h50 q25 0 25 25 v150 q0 25 -25 25 h-750 q-25 0 -25 -25 v-50 z" fill="rgba(0,0,0,0.5)" stroke="none" transform="scale(0.70) translate(200,275)"></path>
                  </svg>
                </a>
              </div>
              <div class="col-md-12">
                <h4 class="">
                  <a href="#">Title 3</a>
                </h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

＆＃13;

Answer 2

在得到答案后，解决方案非常明显。我刚刚在这里和那里用col-xs-替换了我的col-md- ..看看：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

<section class="mt16 mb16">
  <div class="container">
    <div class="row">
      <div class="col-md-4 row">
        <div class="btn btn-primary col-xs-6 col-xs-offset-1">
          <a href="#">
            <svg viewBox="0 75 350 200">
              <path d="M268.34,146.93c18.16-20.88,21.81-49.38,11.93-73.34l-36.46,42.52l-35.94-06.99L195.96,74.5l36.37-42.42c-25.02-06.3-52.58,01.3-70.66,22.1c-19.07,21.93-22.19,52.29-10.39,76.93L56.24,240.4c-10.11,11.62-08.88,29.24,02.74,39.35c11.62,10.1,29.24,08.88,39.35-02.74l94.93-109.18C219.39,176.25,249.18,168.96,268.34,146.93z" fill="rgba(0,0,0,0.5)" stroke="none" transform="scale(0.75) translate(70,80)"></path>
            </svg>
          </a>
        </div>
        <div class="col-xs-12">
          <h4 class="">
            <a href="#">Title 1</a>
          </h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="col-md-4 row">
        <div class="btn btn-primary col-xs-6 col-xs-offset-1">
          <a href="#">
            <svg viewBox="0 75 350 200">
              <path d="M253.1,28.72l-33.84-21.27c-08.54-05.36-19.79-02.78-25.17,05.76l-13.34,21.23l64.74,40.66l13.35-21.22C264.2,45.33,261.64,34.07,253.1,28.72zM65.55,217.86l64.74,40.66L235.81,90.54l-64.77-40.67L65.55,217.86zM55.66,269.52l-01.43,38.19l33.79-17.87l31.4-16.58l-62.46-39.25L55.66,269.52z" fill="rgba(0,0,0,0.5)" stroke="none" transform="scale(0.65) translate(120,120)"></path>
            </svg>
          </a>
        </div>
        <div class="col-xs-12">
          <h4 class="">
            <a href="#">Title 2</a>
          </h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="col-md-4 row">
        <div class="btn btn-primary col-xs-6 col-xs-offset-1">
          <a href="#">
            <svg viewBox="0 250 1000 571.43">
              <path d="M400 675 v-250 q0 -25 -25 -25 h-100 q-25 0 -9 -19.21 l217.99 -261.59 q16 -19.21 32.01 0 l217.99 261.59 q16 19.21 -9 19.21 h-100 q-25 0 -25 25 v250 q0 25 -25 25 h-150 q-25 0 -25 -25 zM100 725 q0 -25 25 -25 h50 q25 0 25 25 v50 q0 25 25 25 h550 q25 0 25 -25 v-50 q0 -25 25 -25 h50 q25 0 25 25 v150 q0 25 -25 25 h-750 q-25 0 -25 -25 v-50 z" fill="rgba(0,0,0,0.5)" stroke="none" transform="scale(0.70) translate(200,275)"></path>
            </svg>
          </a>
        </div>
        <div class="col-xs-12">
          <h4 class="">
            <a href="#">Title 3</a>
          </h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </div>
</section>

调整窗口大小时按钮松散内联svg

2 个答案: