放置小型设备的引导程序行

Question

I'm trying to position my bootstrap rows for small devices but I'm running into an issue with my rows. 我正在尝试为小型设备放置引导程序行，但是我的行遇到了问题。

They are touching the edge of the screen and it looks really ugly, and I tried to offset it with col-ex-off-2 but now that is not only not helping at all, but its messing up the screen medium and large screens. 他们正在触摸屏幕的边缘，看起来确实很丑陋，我尝试用col-ex-off-2来抵消它，但是现在这不仅无济于事，而且弄乱了中型和大型屏幕。

Also, I can add any margin to the rows either and its making the text boxes look super ugly because they are touching. 另外，我也可以在行中添加任何边距，这会使文本框看起来非常丑陋，因为它们相互接触。

Here is a link to the bootply replicating this issue. 这是复制此问题的bootply的链接。 Notice the text boxes are touching each other and it looks bad. 请注意，文本框相互接触，看起来很糟。 Also they are not side by side like I would prefer. 而且它们并没有像我希望的那样并排。

http://www.bootply.com/Ko7Ky3nj0M http://www.bootply.com/Ko7Ky3nj0M

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  html,body {
  height:100vh;  
  max-width: 1500px;
  margin: 0 auto;
  padding-top: 00px;
  }

  h1 {
  font-size:50px;
  }

  .checkbox-margin
  {
  margin-left:30%;
  }

 .subtitle
{
    display:block;
    text-align:right;
    border-top: 7px solid #ffffff;
    color:white;
    font-size:40px;
}

.textarea
{
margin-left:15px;
margin-right:15px;
padding-top:5px;
padding-bottom:10px;
}

  .content
  {
  min-height:90vh;
  margin-top:5vh;
  margin-bottom:5vh;
  border-radius:15px;
  box-shadow: 1px 1px 20px #000000;
  margin-right:15px;
  }

   .stylebox
  {
  border-top-right-radius:15px;
  border-bottom-left-radius:15px;
  background-color:#FFFFFF;
  color:#CC3611;
  margin-top:5%;
  margin-bottom:7%;
  }

 .full
 {
 min-height:100vh;
 }

 .textarea p
 {
 font-size:20px;
 font-weight:bold;

 }

  .textarea h3
 {
 font-weight:bold;
 }

.divarea
{
margin-left:15px;
margin-right:15px;
padding-top:5px;
padding-bottom:10px;
}

 .form-margin
{
margin-bottom:2%;
}


@media screen and (max-width: 992px) {

.container .col-xs-12 {
margin:0px;
padding:0px;
}

 .col-xs-12
{
margin-top:50px;
padding-bottom:10px;
padding-left: 10px;
padding-right:10px;
}

.content
{
min-height:100vh;
border-radius:0px;
box-shadow: 0px;
}

h1 {
padding:0px;
}

}


  </style>
</head>
<body>
        <div class="container full">
            <div class="row full">
                <div class="col-xs-0 col-md-2">
                </div>
                <div class="col-xs-12 col-md-8 content">
                    <div class='divarea'>

                    <div class='row form-margin'>


                        <div class='col-xs-8 col-xs-offset-2 col-md-6'>
                        <input placeholder='Test' type="text" class="form-control" id="usr">
                        </div>

                        <div class='col-xs-8 col-xs-offset-2 col-md-6'>
                        <input  placeholder='Test' type="text" class="form-control" id="usr">
                        </div>
                    </div>

                    <div class='row form-margin'>


                        <div class='col-xs-8 col-xs-offset-2 col-md-6'>
                        <input placeholder='Test' type="text" class="form-control" id="usr">
                        </div>

                        <div class='col-xs-8 col-xs-offset-2 col-md-6'>
                        <input  placeholder='Test' type="text" class="form-control" id="usr">
                        </div>
                    </div>

                    <div class='row form-margin'>


                        <div class='col-xs-8 col-xs-offset-2 col-md-6'>
                        <input placeholder='Test' type="text" class="form-control" id="usr">
                        </div>

                        <div class='col-xs-8 col-xs-offset-2 col-md-6'>
                        <input  placeholder='Test' type="text" class="form-control" id="usr">
                        </div>
                    </div>
                    </div>
                </div>
                <div class="col-xs-0 col-md-2"></div>
            </div>
        </div>  

</body>

</html>

Answer 1

You need to change the way that you are using your forms, there is no need to add custom css, if you wrap each pair of elements in a "input-group" class, you can apply other classes that separates the information nicely. 您需要更改使用表单的方式，无需添加自定义CSS，如果将每对元素都包装在“ input-group”类中，则可以应用其他类来很好地分隔信息。 If you check the Bootsrap input group documentation here you can get some examples on form elements. 如果您在此处查看Bootsrap输入组文档，则可以获取有关表单元素的一些示例。 You can solve you current problem by adding an empty element , such as a label, with the class mb-1 (margin-bottom-1rem). 您可以通过添加类mb-1（margin-bottom-1rem）的空元素（例如标签）来解决当前问题。 Note that this is a hotfix and would not recommend it otherwise. 请注意，这是一个修补程序，否则将不建议这样做。

<div class="row form-margin">


    <div class="col-xs-8 col-xs-offset-2 col-md-6 ">
            <input placeholder="Test" type="text" class="form-control" id="usr">
            <label class="m-b-2"></label>
    </div>

    <div class="col-xs-8 col-xs-offset-2 col-md-6">
            <input placeholder="Test" type="text" class="form-control" id="usr">
            <label class="m-b-2"></label>
    </div>
</div>

放置小型设备的引导程序行

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-08-26 22:29:59

放置小型设备的引导程序行

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-08-26 22:29:59

解决方案1
0 已采纳 2016-08-26 22:29:59