Question

我试图让我的网站对手机进行响应，并使用bootstrap 3，一切都很好，但元素＆＃34;形式控制＆＃34;宽度很大（比电话屏幕大）我认为这就是为什么我的页面右边有很小的空白区域。如何进行响应式表格控制？这一切都在容器流体中，并且所有行都正常工作。我有容器流体然后排成班级＆＃34; gray-bg＆＃34;在它中有3行。最后一行是我的表格。

<div class="row">
    <div class="grey-bg">

            <div class="col-lg-1"></div>

        <div class="row">
            <div class="bookTitle imgBottomText col-lg-4 col-md-5 " style="padding: 0">
                <h3>The secret <span>free</span> eBook we offer!</h3>
                <br>
                <p>Enter your email address and recieve this free eBook & to also subscribe to our weekly newsletter</p>
                <br>
            </div>
        </div>
        <div class="row">
            <div class="bookImage col-lg-3 col-md-4"></div>

            <div class="col-lg-2 col-md-2">
                <h5 class="title1"><i class="fa fa-heart-o"></i>&nbsp;Lorem ipsum dolor</h5>
                <h5 class="title2"><i class="fa fa-paperclip"></i>&nbsp;Lorem ipsum dolor</h5>
                <h5 class="title3"><i class="fa fa-envelope-o"></i>&nbsp;Lorem ipsum dolor</h5>
            </div>
        </div>
        <div class="row">

                <form class="form-inline newslatter-form">
                    <div class="col-xs-8">
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputEmail3">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
                    </div>
            </div>
                    <div class="col-xs-4">
                    <div class="form-group">
                        <button type="submit" class="btn btn-warning submit-newsletter"><i class="fa fa-angle-right"></i></button>
                    </div>
                    </div>
                </form>
        </div>
            </div>
            <div class="col-lg-2"></div>
        </div>

Answer 1

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<div class="container-fluid">
  <div class="row grey-bg">
    <div class="col-lg-1">
      <div class="row">
        <div class="bookTitle imgBottomText col-lg-4 col-md-5 " style="padding: 0">
          <h3>The secret <span>free</span> eBook we offer!</h3>
          <br>
          <p>Enter your email address and recieve this free eBook & to also subscribe to our weekly newsletter</p>
          <br>
        </div>
      </div>
      <div class="row">
        <div class="bookImage col-lg-3 col-md-4"></div>
        <div class="col-lg-2 col-md-2">
          <h5 class="title1"><i class="fa fa-heart-o"></i>&nbsp;Lorem ipsum dolor</h5>
          <h5 class="title2"><i class="fa fa-paperclip"></i>&nbsp;Lorem ipsum dolor</h5>
          <h5 class="title3"><i class="fa fa-envelope-o"></i>&nbsp;Lorem ipsum dolor</h5>
        </div>
      </div>
      <div class="row">

        <form class="form-inline newslatter-form">
          <div class="col-xs-8">
            <div class="form-group">
              <label class="sr-only" for="exampleInputEmail3">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
            </div>
          </div>
          <div class="col-xs-4">
            <div class="form-group">
              <button type="submit" class="btn btn-warning submit-newsletter"><i class="fa fa-angle-right"></i>Submit</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="col-lg-2"></div>
  </div>

Answer 2

margin课程为您提供负面.container。我添加了一个.row类作为内容包装，并评论了不必要的<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container">  <div class="grey-bg"> <div class="col-lg-1"></div>  <div class="bookTitle imgBottomText col-lg-4 col-md-5 " style="padding: 0"> <h3>The secret <span>free</span> eBook we offer!</h3> <br> <p>Enter your email address and recieve this free eBook & to also subscribe to our weekly newsletter</p> <br> </div>  <div class="row"> <div class="bookImage col-lg-3 col-md-4"></div> <div class="col-lg-2 col-md-2"> <h5 class="title1"><i class="fa fa-heart-o"></i> Lorem ipsum dolor</h5> <h5 class="title2"><i class="fa fa-paperclip"></i> Lorem ipsum dolor</h5> <h5 class="title3"><i class="fa fa-envelope-o"></i> Lorem ipsum dolor</h5> </div> </div> <div class="row"> <form class="form-inline newslatter-form"> <div class="col-xs-8"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail3">Email address</label> <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email"> </div> </div> <div class="col-xs-4"> <div class="form-group"> <button type="submit" class="btn btn-warning submit-newsletter"><i class="fa fa-angle-right"></i>Submit</button> </div> </div> </form> </div> </div> <div class="col-lg-2"></div>  </div>类。

请注意，如果您对注释行进行未注释，则文本将无法呼吸，并且对视口边太紧。

＆＃13;

if let image = UIImage(data: imageData) {
                    print("We do have the image")
                    self.itemImageView = UIImageView(image: image)
                }

＆＃13;

从控制的宽度太大

2 个答案: