Bootstrap响应21英寸屏幕

Question

我正在使用Bootstrap做一个小项目。现在我遇到了一个响应问题，希望有人可以帮助我。

首先也是最重要的问题是：当这个网页显示在21英寸的屏幕上时，布局完全被打破。我试图调整'lg-col = x'，但它仍然不起作用。

同样地，当我在狭窄的屏幕上显示它时，按钮没有很好地放置。

<!-- Down payment calculation -->

    
function downpayment()     {
  var pvalue = document.formval.p_value.value;
  var down = Math.ceil(pvalue * 0.6);
  document.formval2.field1.value = ("The down payment is " + "$" + down.toFixed(0));    
} 

<!-- Monthly payment calculation -->

    
function monthly()     {        
  var pvalue = document.formval.p_value.value; // pick the form input value (property value)
          
  var rate = document.formval.int_rate.value; // pick the form input value (interest rate)
          
  var t = document.formval.period.value; // pick the form input value (tenure)
  var loan = pvalue * 0.4;        
  var r = rate / 100 / 12; // to calculate monthly rate 
          
  var monthly = (loan * r * Math.pow((1 + r), t * 12)) / (Math.pow((1 + r), t * 12) - 1);
  if (monthly.toFixed(0) == "Infinity") {
    document.formval3.field2.value = ("Please complete the input");
  } else if (monthly.toFixed(0) == "NaN") {
    document.formval3.field2.value = ("Please complete the input");
  } else {
    document.formval3.field2.value = ("The monthly payment is: " + "$" + monthly.toFixed(0));
  }    
}  
<!-- Total amount calculation -->

    
function total()     {        
  var pvalue = document.formval.p_value.value; // pick the form input value (property value)
          
  var rate = document.formval.int_rate.value; // pick the form input value (interest rate)
          
  var t = document.formval.period.value; // pick the form input value (tenure)
  var loan = pvalue * 0.4;        
  var r = rate / (12 * 100); // to calculate rate percentage..
          
  var monthly = (loan * r * Math.pow((1 + r), t * 12)) / (Math.pow((1 + r), t * 12) - 1);
  // to calculate compound interest..
          
  var total = monthly * 12 * t + pvalue * 0.6 + 650;
  if (total.toFixed(0) == "NaN") {
    document.formval4.field3.value = ("Please complete the input");
  } else {
    document.formval4.field3.value = ("The total amount is: " + "$" + total.toFixed(0));
  }

      
}



<!-- JQ effect -->
$(function() {
  $("#Calculated").click(function() {
    $("[name='field1']").show(1000)
  })
})
$(function() {
  $("#monthly-Calculate").click(function() {
    $("[name='field2']").show(1000)
  })
})
$(function() {
  $("#sum").click(function() {
    $("[name='field3']").show(1000)
  })
})
$(function() {
  $("#Reset").click(function() {
    $("[name='field3']").slideUp(1000)
    $("[name='field2']").slideUp(1000)
    $("[name='field1']").slideUp(1000)
  })
})

.jumbotron {
  position: relative;
  background: #000 url("https://s14.postimg.org/brfoy05nl/homeloan.jpg") center center;
  width: 100%;
  height: 230px;
  background-size: contain;
  overflow: hidden;
}

h2 {
  padding-top: 30px;
  font-size: 50px;
  text-shadow: 1px 1px 2px white;
}

form {
  margin-top: 35px;
  margin-left: 80px;
}

body {
  background-image: url(https://images.unsplash.com/photo-1473181488821-2d23949a045a?dpr=1&auto=format&fit=crop&w=767&h=511&q=80&cs=tinysrgb&crop=);
  background-size: cover;
}

label {
  display: initial;
  font-weight: normal;
  padding-right: 40px;
  text-shadow: 1px 1px 1px grey;
}

.input-group {
  padding-top: 10px;
}

.btn-primary {
  color: #fff;
  background-color: #413ba0;
  border-color: black;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #775858;
}

.btn-success {
  color: #fff;
  background-color: #83a03b;
  border-color: black;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open>.dropdown-toggle.btn-success {
  color: #fff;
  background-color: #775858;
}

.btn-info {
  color: #fff;
  background-color: #a03b97;
  border-color: black;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
  color: #fff;
  background-color: #775858;
}

.btn-warning {
  color: #fff;
  background-color: #d63e3e;
  border-color: black;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open>.dropdown-toggle.btn-warning {
  color: #fff;
  background-color: black;
}

.btn {
  font-size: 13px;
  text-shadow: 1px 3px 3px black;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>Anmei International</title>
  <link rel="icon" href="https://www.iconexperience.com/_img/g_collection_png/standard/512x512/currency_dollar.png" />
  <link href="http://pg.gaarsam.com//html/assets/bootstrap/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Arimo:400i|PT+Sans" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body style="font-family: 'Montserrat Light', sans-serif;">
  <div class="jumbotron text-center">
    <h2 style="color:White; font-family: 'PT Sans', sans-serif; font-size: 60px;">Property Investment Calculator</h2>
  </div>

  <!-- Input form -->
  <form name="formval" class="form-horizontal" style="font-size:20px; color: black; font-family: 'PT Sans', sans-serif; width: 50%; margin-left: 25%">

    <!-- Property Value -->
    <div class="form-group" style="padding-bottom: 0.5%">
      <label for="input" class="control-label" style="font-weight: bold">Property Value</label>
      <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control input-sm" id="property_value" name="p_value" placeholder="Please input property price" style="font-family: 'PT Sans', sans-serif; font-size: 16px;">
      </div>
    </div>

    <!-- Loan Tenure -->
    <div class="form-group" style="padding-bottom: 0.5%">
      <label for="input" class="control-label" style="font-weight: bold">Loan Tenure</label>
      <div class="input-group">
        <!-- 15 years -->
        <label style="color: #962121; font-weight: bold; margin-right: 5%;">15 years
						<input type="radio" id="fifteen_years" name="period" value="15" style="font-family: 'PT Sans', sans-serif; font-size: 16px; margin-left: 3%;" onclick="getValue(this)" required="">
					    </label>

        <!-- 30 years -->
        <label style="color: #962121; font-weight: bold;">30 years
						<input type="radio" id="thirty_years" name="period" value="30" style="font-family: 'PT Sans', sans-serif; font-size: 16px; margin-left: 3%;" onclick="getValue(this)">
						</label>
      </div>
    </div>

    <!-- APR -->
    <div class="form-group" style="padding-bottom: 0.5%">
      <label for="input" class="control-label" style="font-weight: bold">Annual Percentage Rate</label>
      <div class="input-group">
        <input type="text" class="form-control input-sm" id="idROI" name="int_rate" style="font-family: 'PT Sans', sans-serif; font-size: 16px;">
        <span class="input-group-addon">%</span>
      </div>
    </div>

    <!-- button -->
    <div class="form-group">

      <!-- Downpayment -->
      <button type="button" id="Calculated" name="calculate" value="downpayment" onclick="downpayment()" class="btn btn-primary col-lg-3 col-md-10 col-sm-10" style="margin-right: 2%; padding: 5px;">Calculate down payment</button>

      <!-- Monthly payment -->
      <button type="button" id="monthly-Calculate" name="calculate" value="monthly" onclick="monthly()" class="btn btn-success col-lg-3 col-md-10 col-sm-10" style="margin-right: 2%; padding: 5px;">Calculate monthly payment</button>

      <!-- Total -->
      <button type="button" id="sum" name="calculate" value="toal" onclick="total()" class="btn btn-info col-lg-3 col-md-10 col-sm-10" style="margin-right: 12%; padding: 5px;">Calculate total amount</button>

      <!-- Reset -->
      <button type="reset" id="Reset" class="btn btn-warning col-lg-1 col-md-10 col-sm-10" style="padding: 5px;">Reset</button>
    </div>
  </form>
  < <!-- Output form -->
    <!-- Down payment output -->
    <form name="formval2" class="form-horizontal col-lg-3 col-md-10 col-sm-10">
      <div class="form-group">
        <output name="field1" style="display:none; font-size:20px; padding:10px; text-align: center; font-family: 'Arimo', sans-serif; color: black; background-color: white; border-radius: 25px; text-shadow: 1px 1px 1px grey;"></output>
      </div>
      </form>

    <!-- Monthly payment output -->
    <form name="formval3" class="form-horizontal col-lg-3 col-md-10 col-sm-10">
      <div class="form-group">
        <output name="field2" style="display:none; font-size:20px; padding:10px; text-align: center; font-family: 'Arimo', sans-serif; color: black; background-color: white; border-radius: 25px; text-shadow: 1px 1px 1px grey;"></output>
      </div>
      </form>

    <!-- Total amount output -->
    <form name="formval4" class="form-horizontal col-lg-3 col-md-10 col-sm-10">
      <div class="form-group">
        <output name="field3" style="display:none; font-size:20px; padding:10px; text-align: center; font-family: 'Arimo', sans-serif; color: black; background-color: white; border-radius: 25px; text-shadow: 1px 1px 1px grey;"></output>
      </div>
      </form>

    <script type="text/javascript" src="http://pg.gaarsam.com//html/assets/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="http://pg.gaarsam.com//html/assets/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://pg.gaarsam.com//html/assets/js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="english.js"></script>
</body>

</html>

Answer 1

正如我在评论中所说的那样，我并不是100％肯定你所说的话。

您可以将图片上传到imgur，然后将链接嵌入帖子中。

至于你的按钮问题，我不确定你指的是什么，但有一件事要尝试将你的col类包装在父.row div中