Question

我正在尝试在我的行div中使用以下“卡片”，以获得左卡的70％空间和右卡的30％空间。我尝试设置每张卡的百分比宽度，但它似乎没有工作。

<div class="row">
    <!-- Column -->
    <div class="col-lg-3 col-md-6" width="500px">
        <div class="card">
            <div class="card-body">
            <h5 class="card-title m-b-40">Company Name</h5>
                <h6 style='font-weight: bold;'>Company Overview</h6>
                <h6>Annual Revenue: 2,000,000,000</h6>
                <h6>Employees: 150,000</h6>
                <h6>Industry: Data Processing, Hosting, and Related Services</h6>
                <h6>Inherent Risk Industry: Information Processing</h6>
            </div>
            <div id="sparkline8" class="sparkchart"></div>
        </div>
    </div>
    <!-- Column -->
    <!-- Column -->
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Relative Risk</h5>
                <div class="d-flex no-block align-items-center m-t-20 m-b-20">
                    <div id="sparklinedash4"></div>
                    <div class="ml-auto">
                        <h2 class="text-danger"> <span class="counter">Medium</span></h2>
                        <h2 class=""> <span class="counter">999</span></h2>
                    </div>
                </div>
            </div>
            <div id="sparkline8" class="sparkchart"></div>
        </div>
    </div>
    <!-- Column -->
</div>

Answer 1

引导程序中的宽度 仅列。不要设置宽度！如果您想要精确70%和30%，请在此处自定义网格：https://getbootstrap.com/docs/3.3/customize/#grid-system（10列而不是12列）。在左侧设置col-?-3，在右侧设置col-?-7。

如果确切的宽度无关紧要，您可以使用standard-bootstrap-3-css并使用4列（33.33%）作为左侧，使用8列（66.66%）作为右边。

<div class="row">
  <!-- Column -->
  <div class="col-lg-4 col-md-4 col-xs-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title m-b-40">Company Name</h5>
        <h6 style='font-weight: bold;'>Company Overview</h6>
        <h6>Annual Revenue: 2,000,000,000</h6>
        <h6>Employees: 150,000</h6>
        <h6>Industry: Data Processing, Hosting, and Related Services</h6>
        <h6>Inherent Risk Industry: Information Processing</h6>
      </div>
      <div id="sparkline8" class="sparkchart"></div>
    </div>
  </div>
  <!-- Column -->
  <!-- Column -->
  <div class="col-lg-8 col-md-8 col-xs-8">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Relative Risk</h5>
        <div class="d-flex no-block align-items-center m-t-20 m-b-20">
          <div id="sparklinedash4"></div>
          <div class="ml-auto">
            <h2 class="text-danger"> <span class="counter">Medium</span></h2>
            <h2 class=""> <span class="counter">999</span></h2>
          </div>
        </div>
      </div>
      <div id="sparkline8" class="sparkchart"></div>
    </div>
  </div>
  <!-- Column -->
</div>

Answer 2

你的两个div都有相同的类名。您可以在css样式文件中执行此操作：

.col1{
    width: 70%;
}

.col2{
    width: 30%;
}

所以重新分配你的第一个div类（col-lg-3 col-md-6，你有宽度=＆＃34; 500px＆＃34;）到col1（或任何你想要的）和你的第二个div类（col- lg-3 col-md-6）到col2 ......

希望这有帮助

如何设置卡百分比宽度？

2 个答案: