Question

我正在尝试构建一个animalCard网页。我可以阻止框架div调整大小。但是如何阻止div内的文本重新定位。以下是调整大小之前和之后我的网页的快照。

调整大小后：

我尝试了很多搜索。尝试将我的整个身体内容放在div中以修复宽度。以下是我的代码：

.cardFrame{
  border: solid;
  border-radius: 5%;
  text-align: center;
  margin-left: 30%;
  margin-right: 30%;
  background-color: grey;
  margin-top: 10px;
    position: absolute;
	min-width: 539px;
	box-shadow: 0 0 80px grey;
	

	
}

#imageSize{
  height: 160px;
  width: 160px;
  align-self: center;
  margin-top: 30px;
  /*border: solid rgba(0,0,0,.5);*/
  border-width: thick;
  box-shadow: 0 0 80px black;
}
.infoContent{
  margin-top: 20px;
  position: relative;
  width: 80%;
  display: inline-block;
  border-style:hidden;
  border-radius: 5%;
  background-color: rgb(240,230,140);
    box-shadow: 0 0 80px rgba(240,230,140,.5);


}

.info{
  font-size: 20px;
  width: fixed;
  /*text-shadow: 0 0 30px rgba(0,0,0,.5); */
}

.line{
  margin-left: 5%;
  margin-right: 5%;
}
#if{
  font-size: 25px;
  text-shadow: 0 0 30px rgba(0,0,0,.5);
  
}
#fact{
  font-size: 20px;
}
#factDescription{
  font-size: 12px;
}

.listContent{
  font-style: italic;
  font-weight: bold;
  text-align: left;

  list-style-type: none;
}

#listItems{
  font-size: 30px;
  text-shadow: 0 0 30px rgba(0,0,0,.5);
}

<!DOCTYPE html>
<html>
 <head>
   <meta name="description" content="Animal Card Project">
   <meta name="Author" content="Gaurav Thantry">
   <meta name="keywords" content="html, CSS">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css/stylesheet.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <title>AnimalCard</title>
 </head>
 <body>
 <div style="position: absolute, text-align: center">
   <div class="cardFrame">
     <img src="images/burfi.jpg" id="imageSize" alt="my pet's pic">
     <div class="row infoContent" text-align="center">
       <div class="col-md-6 info">
         <p>NAME:</p>
         <p>AGE:</p>
         <p>BREED:</p>
       </div>
       <div class="col-md-6 info">
        <p>Burfi</p>
        <p>2 Yrs</p>
        <p>Pug</p>
       </div>
     </div>
     <hr class="line">
     <p id="if">INTERESTING FACT</p>
     <p id="fact"><em>Pugs are ancient breed</em></p>
     <p id="factDescription">Because the pug lineage stretches so far back, their early history is a little murky. Most believe that the breed originated in China and existed before 400 BCE and were called (or at least closely related to a breed called) "lo-sze." Buddhist monks kept the dogs as pets in Tibetan monasteries.</p>
     <hr class="line">
     <p id="listItems">Things to buy for a pug</p>
     <div class="row">
       <div class="col-md-6">
        <ul class="listContent">
         <li><label>Food and Water Bowl</label></li>
         <li><label>Steam Cleaner</label></li>
         <li><label>Collar and/or Harness</label></li>
         <li><label>Baby/Dog Gate</label></li>
       </ul>
      </div>
      <div class="col-md-6">
         <ul class="listContent">
          <li><label>Walking Leash</label></li>
          <li><label>The Pug T-Shirt</label></li>
          <li><label>Deshedding Brush</label></li>
          <li><label>Treats</label></li>
         </ul>
       </div>
      </div>
      <p text-align="center">Created by @Gaurav Thantry</p>
    </div>
</div>
 </body>
</html>

Answer 1

您正在使用.col-md-6，它只在中型和大型屏幕上显示两列。如果您始终希望密钥/值并排，请尝试使用col-xs-6或col-sm-6。您正在使用的css框架的文档将提供有关网格的更多详细信息以及它们用于在特定屏幕尺寸上应用特定宽度的类。

有关任何其他Bootstrap相关问题的参考，here’s the documentation to the version you’re currently using。

Answer 2

只需将.info元素上的col-6更改为alert.setButton(AlertDialog.BUTTON_POSITIVE,"Update", object :DialogInterface.OnClickListener { override fun onClick(dialog: DialogInterface?, which: Int) { realm.beginTransaction() selectedCar.code = code.text.toString() selectedCar.plateNum = carNumber.text.toString() selectedCar.duration = duration.text.toString() selectedCar.nickName = name.text.toString() emirates[position] = selectedCar realm.commitTransaction() val realm = Realm.getDefaultInstance() val helper = RealmHelper(realm) val users = helper.readAll() mAdapter = MyAdapter(this, users) listView.adapter = mAdapter Toast.makeText(this@Users, "${mAdapter.notifyDataSetChanged()} called", Toast.LENGTH_LONG).show() } })即可。（这与col-xs-6相同）。这将确保所有设备都有两列，从超小屏幕尺寸到超大尺寸。
有关详细信息，请参阅此处：https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

浏览器尺寸更改时，无法停止重新定位文本

2 个答案: