Question

我使用Bootstrap 3并尝试将多个小输入元素放在同一条线上，但我不明白我应该如何做到这一点让它们包裹，或输入太宽。

我希望它看起来如何：

（输入字段为只读）

我尝试使用下面的代码，但是如果我删除了glypicon-part，它会因为某些原因而被包装，并且我无法在没有包装的情况下添加复选框。

        var certificate = new X509Certificate2(@"C:\path\to\my.p12", "mypassword", X509KeyStorageFlags.Exportable);

        var credential = new ServiceAccountCredential(new ServiceAccountCredential
            .Initializer("my@id.gserviceaccount.com")
        {
            Scopes = new[] { "https://mail.google.com/" },
            User = "scm.beartung@gmail.com"
        }.FromCertificate(certificate));

        bool result = await credential.RequestAccessTokenAsync(CancellationToken.None);


        // send email
        using (var client = new SmtpClient())
        {
            client.Connect("smtp.gmail.com", 587, false);
            client.Authenticate("user.name", credential.Token.AccessToken);
            client.Send(myMessage);
            client.Disconnect(true);
        }

Answer 1

您正在使用Bootstrap，因此请使用以下类：.form-inline和.col-[sm,md,lg]-12。表单控件将内联直到断点（视口768px），然后它换行。请参阅演示中的第一个示例。

如果您完全反对任何包装，那么您可以使用flex-wrap:nowrap。它永远不会换行到新的一行。请参阅演示中的第二个示例。

演示

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title></title>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
  <style>
    .flex {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-around
    }
  </style>
</head>

<body>
  <main class='container-fluid'>
    <h2>Bootstrap</h2>
    <section class='row'>
      <form class="form-inline col-sm-12">
        <label class='control-label col-sm-2'>Check&nbsp;
  	<input type='checkbox' class='form-control'>
    </label>
        <label class='control-label col-sm-2'>True&nbsp;
  	<input type='radio' class='form-control' name='rad'>
    </label>
        <label class='control-label col-sm-2'>False&nbsp;
  	<input type='radio' class='form-control' name='rad'>
    </label>
        <label class='control-label col-sm-2'>Text&nbsp;
  	<input type='text' class='form-control'>
    </label>
        <label class='control-label col-sm-2'>Digits&nbsp;
  	<input type='number' class='form-control'>
    </label>
        <label class='control-label col-sm-2'>Date&nbsp;
  	<input type='text' class='form-control'>
    </label>
      </form>
    </section>
    <hr>
    <h2>Flexbox flex-wrap:nowrap</h2>
    <section class='row'>
      <form class="flex form-inline col-sm-12">
        <label class='control-label'>Check&nbsp;
  	<input type='checkbox' class='form-control'>
    </label>
        <label class='control-label'>True&nbsp;
  	<input type='radio' class='form-control' name='rad'>
    </label>
        <label class='control-label'>False&nbsp;
  	<input type='radio' class='form-control' name='rad'>
    </label>
        <label class='control-label'>Text&nbsp;
  	<input type='text' class='form-control'>
    </label>
        <label class='control-label'>Digits&nbsp;
  	<input type='number' class='form-control'>
    </label>
        <label class='control-label'>Date&nbsp;
  	<input type='text' class='form-control'>
    </label>
      </form>
    </section>
  </main>
</body>

</html>

＆＃13;

一行上有多个小输入元素，没有包装

1 个答案:

演示